20+ jQuery Image Sliders and Tutorials for Creating your Own
jQuery Image Slider Plugins
Coin Slider
As with most well written jQuery plugins you can get awesome features on your web pages with only a few lines of code. Coin Slider is an excellent script for showcasing images on a web site or blog, fx. an online portfolio.
- Unique transition effects
- Compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+
- Valid markup
- Flexible configuration
- Auto slide
- Navigation box
- Lightweight (8kb only)
- Linking images
- Free to use under MIT licence
- Fully customizable using CSS
Supersized
Awesome full size/screen slider.
- Resizes images to fill browser while maintaining image dimension ratio
- Cycles Images/backgrounds via slideshow with transitions and preloading
- Navigation controls allow for pause/play and forward/back
Nivo Slider
Great and flexible jQueery slider with awesome transition effects. See for your self here. I personally thought it was flash when I first saw it! More details on features:
- 9 unique transition effects
- Simple clean & valid markup
- Loads of settings to tweak
- Built in directional and control navigation
- Packed version only weighs 7kb
- Supports linking images
- Keyboard Navigation
- HTML Captions
- Free to use and abuse under the MIT license
Nivo Slider has been tested in the following browsers:
- Internet Explorer v7+
- Firefox v3+
- Google Chrome v4
- Safari v4
- Opera v10.5
Dragdealer
Dragdealer is much more than a simple image slider. It offers a wide variety of features related to dragging, but is also quite powerful for creating different types if image sliders. I recommend you go to the website and try out the demos.
Presentation Cycle
Cycle is a script that supports image presentations to easily display multiple images. This script supports a lot of effects and the cycling of html elements.
Presentation Cycle is a variation on the functionality of Cycle. Instead of generating a list of numbers that are clickable Presentation Cycle generates a progress bar that shows when the new slide will appear. Features:
- Cycle through elements
- Adjustable animation times
- Generates a navigation bar that also shows the progress
- Works in modern browsers
AnythingSlider jQuery Plugin
AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. In other words, to create a really “full featured” slider that could be widely useful.
Easy Slider 1.7 – Numeric Navigation jQuery Slider
Great slider plugin for content and images. It is very easy to use – only a few lines of code is needed.
- numeric navigation (as an alternative to next/previous buttons)
- continuous scroll instead of jumping to the first (or last) slide
- 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
AviaSlider
Very feature rich and good looking image slider.
- 8 unique transition effects
- Lots of easy to set options to create your own effects
- Included Image preloader
- Autoplay that stops on user interaction
- Valid HTML5 and CSS 3 Markup
- Packed version only weights 8kb
- Supports linked images
- already prepared to work with prettyPhoto Lightbox
- works with jQuery 1.32 and higher
- Internet Explorer 6 and higher
- Safari 3 and higher
- Firefox 2 and higher
- Opera 10 and higher
- Google Chrome 3 and higher
- Checks for last 3 Browsers performed on Mac & Win
horinaja
Horinaja is a ready-to-use slide-show implementation, utilizing either scriptaculous/prototype or jQuery. A running example above
- allows you to use a mousewheel for navigation.
- automatically create slide indices (pagination), if required
jqFancyTransitions
jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.
- ‘wave’, ‘zipper’ and ‘curtain’ effect, plus options that can be used for custom effect.
- compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.
Agile Carousel
Jquery plugin that allows you to easily create a custom carousel. Call Jquery UI to enable many different additional transition types and easing methods. Uses PHP to draw images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more!
Feature List
This jQuery plugin enables simple and easy creation of an interactive “Featured Items” widget.
- Slick effect, no Flash needed
- It’s just 2K
- Reusable on multiple containers
- Cycles items via slideshow
- Can be styled with custom HTML/CSS
Galleria
Galleria is a JavaScript image gallery written in jQuery. Images are loaded one by one from an unordered list and displays thumbnails when each image is loaded. Galleria and a few themes are free to use under the MIT license. More advanced themes, better licensing options, support, integrations for wordpress etc. will soon be available as a premium membership.
loopedSlider
jQuery Image Slider Tutorials
Automatic Image Slider w/ CSS & jQuery
How to Create a Simple iTunes-like Slider
Animate Panning Slideshow with jQuery
A Beautiful Apple-style Slideshow Gallery With CSS & jQuery
Other sliders worth considering
cu3er
Flash slider with the most awesome transition effects you can imagine!
Piecemaker XML Gallery
Another Flash slider with cool transition effects. This is actually a tutorial and you can learn how to create it yourself!