20+ jQuery Image Sliders and Tutorials for Creating your Own

13年前

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.

Slides are HTML Content (can be anything)

Next Slide / Previous Slide Arrows

Navigation tabs are built and added dynamically (any number of slides)

Optional custom function for formatting navigation text

Auto-playing (optional feature, can start playing or stopped)

Each slide has a hashtag (can link directly to specific slides)

Infinite/Continuous sliding (always slides in the direction you are going, even at “last” slide)

Multiple sliders allowable per-page (hashtags only work on first)

Pauses autoPlay on hover (option)Link to specific slides from static text links

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.