fs_slideshow: An Easy to Customize and Use jQuery Slider

• Download source (fs_slideshow.min) - 1.5 KB
• Download source (fs_slideshow) - 3 KB

Introduction

This plugin originated with my job. Finding a slideshow plugin that suited my unique needs was difficult. Some plugins only had one effect type, some required tedious work to set up and use, and most didn't offer the kind of customization and ease of use I was looking for. Then I decided to take on the task of writing my own plugin suited to my needs, but it quickly grew into an easy to use plugin that has a little of something for everyone.

Background

The concept I started with when preparing for the development of this plugin was creating the ability to transition between any number of slides of any element type as seamlessly as possible. Then it grew to a concept of not just moving forwards and backwards across the slides but navigating to any slide while maintaining the starting order. I also required on many projects that the plugin gave support for multiple slideshows in a single document and to be able to control and access the properties of each one separately. Then, as needs arose, I continued to experiment with and add new feature after new feature.

Using the Code

This slideshow object consists of two inner objects and six inner functions. The main object, known within the scope of the function as curShow, will be created and initialized through the use of a function that extends jQuery. This jQuery method will accept an object of values as a parameter that will define the behavior of the slideshow. For more information on what the allowed options are, see the "Option Quick Reference." After this method is called, your slideshow will be accessible through the newly created global array named _slideshows. Each slideshow you create will be added to this array in the order of creation. For a quicker way to access a slideshow, simply assign a variable to the value at the index of the desired slideshow. Let me provide an example of these concepts:

$('#slideshowID').slideshow({ effect: 'fade', interval: 6000, slides: 'img', auto: true });

Then, assign a new name to the slideshow:

var firstSlider = _slideshows[0];

Explanations of Objects and Functions in the Slideshow Object

The timer object controls and monitors the intervals between each slide transition as well as determines whether transitions are possible based on the current state of animation of the slideshow. If auto is set to true, the timer will call the method to advance the slide at an interval defined in the options object or a default of 5 seconds. It is also possible to define unique interval lengths to individual slide elements using the attribute data-interval.

The slides object houses the slide elements as well as keeps track of what order the slides are in during and between transitions. It also contains a method that is used for shifting the slides' indexes.

The nextSlide function contains the functionality for transitioning from the "active" slide to the "next" slide. It uses a switch statement to execute different code for each of the effect types which is defined in the options object at the time of creating the object.

The previousSlide function does just the opposite of the "nextSlide" function.

The navigate function allows for transitioning the slideshow from one slide to another based on index of the slide relative to the order of the wrapped HTML elements within their parent element.

The applyResize function takes care of making all the slides widths the same to ensure smooth effects. This function is only called if the slide elements are <img> tags.

The logMessage function is used internally and whether or not debug is set to true, every message corresponding to each event is recorded in the messageLog array. Each entry in the log is stored as a DebugMessage that holds a message string and the time the message occurred. The DebugMessage object definition is included at the top of the provided file.

The onNext function defaults to empty unless otherwise specified in the options object. If you choose to set the function, it will be called following each call of the nextSlide function. It will not be called when navigating by index or if you happen to need to transition backwards.

The initialize function is the last function in the object and handles storing the values from the options object and applying those settings. It also retrieves the slide elements that are selected by the CSS selector in the options object. This method also takes care of any and all required manipulation of the slide elements themselves. Also, it binds events to the backButton and forwardButton specified by a selector string in the options object. Specification of these buttons is optional, as is many of the slideshow options.

Option Quick Reference

For future use: This reference section is the same as is provided as document comments at the bottom of the non-minified file download.

• debug: Whether or not to log debugging information to the console
• effect: Name of transitions effect. (fade, slide, or none)
• interval: Time between transitions in milliseconds
• slides: jQuery selector string that identifies the slides of the slideshow in relation to the frame
• backButton: An element that will switch to the previous slide when clicked
• nextButton: An element that will switch to the next slide when clicked
• onNext: Event to call when slide is advanced
• auto: Whether or not to automatically advance the slides

Things to Remember

• The elements to be selected as slides should be of the same dimensions for seamless transitions.
• Using the JavaScript console, you can stop, start, navigate, and remove your slideshows by accessing them through the global array that is created on first use. You can locate it as "_slideshows" with each slideshow at an index relative to the order you created it in.
• If you're having difficulty with a feature or maybe just don't know what's wrong, try specifying "debug: true" in your initial options object and look to the console for more information.
• If your slideshow is set on auto, but you need to perform a separate action when the slide changes, specify the "onNext" value in the options object and set it to a function of your choice.
• If you want to specify custom interval lengths to each slide, add an attribute with name "data-interval" and value of the number of milliseconds to wait on that slide.

History

• My original plugin was created in 2012 and had but only a few features. It also required a CSS file to be installed and a separate plugin file if you wanted to move more than one slide at a time.
• By 2014, I had been slowly adding code and tweaking functions and had a product more similar to the one I'm giving you access to. I used it in several products for work but it still didn't have some major features that I envisioned it to have.
• By the beginning of this year, I had come to a point where I considered it production worthy, and here it is.