The Easiest jQuery Plugin For Sliding Images and Content
New version of my Easy Slider plugin for jQuery is here. This is one of the my rare scripts that make it to their second version. In this case version 1.5
All of the features here are result of your comments, so if you have more ideas, keep ’em coming!
Note: in case you haven’t already, you might want to check out article about first version of this plugin.
Features
This version features:
- auto slide
- continuous sliding
- “go to first” and “go to last” button
- hiding controls
- optional wrapping markup for control buttons
- vertical sliding
- multiple sliders on one page
Here are the things you can customize (with their default values)
prevId: 'prevBtn', prevText: 'Previous', nextId: 'nextBtn', nextText: 'Next', controlsShow: true, controlsBefore: '', controlsAfter: '', controlsFade: true, firstId: 'firstBtn', firstText: 'First', firstShow: false, lastId: 'lastBtn', lastText: 'Last', lastShow: false, vertical: false, speed: 800, auto: false, pause: 2000, continuous: false
I will explain new options:
controlsShow
By default set to true, but if set to false it will not add any controls. It can be used with auto scroll when you want to disable user interaction.
controlsBefore and controlsAfter
In case you want to add some additional markup to gain more control over buttons you can do so by using these parameters. Check out the demo where I use these options.
controlsFade
By default set to true. If set to false it will disable button hiding when slider reaches the end.
firstShow and lastShow
These parameters hide (or show) “go to first” and “go to last” buttons
auto
This option enables auto sliding, Just set it to true.
pause
This option is set in milliseconds and it represent the duration of each slide when plugin is set to auto sliding
continuous
If set to true clicking the next button when the slider reached the end will jump to the beginning (and vice-versa). Combining this option with auto (both set to true) you’ll get endless animation
Demos
I have prepared 5 demos, although I could have done zillions. Hopefully I will have the time to create more good demos as I continue to develop this plugin
- basic default non styled demo
- styled demo with default settings
- non styled demo with vertical scroll and visible “go to first” and “go to last” buttons
- styled demo with auto scroll and continuous sliding
- styled demo with multiple slider, image and content slider, with different settings (top one has auto slide while bottom one doesn’t)
Future
I already have some ideas about next versions (play/pause buttons, numbered pagination…) but I would also like you to share any idea you might have.