25+ jQuery Slider Examples
Tweet
Hello all web developers, In today’s post, we’ve combined a collection of 25 jQuery slider examples with tutorials and live demos. Whether you’re looking for a jquery image slider, a jquery text slider, a vertical/horizontal jquery slider, a jquery ui slider, a slider that moves along the sidebar, or any other type of jQuery slider you can dream of, this post will have some useful jQuery resources for you. Full list after jump !
#1 Beautiful Photo Stack Gallery with jQuery and CSS3
In this tutorial we are going to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. In the photo stack view, we can browse through the images by putting the top most image behind all the stack with a slick animation.
#2 Building a jQuery Image Scroller
In this tutorial, we’re going to be building an image scroller, making use of jQuery’s excellent animation features and generally having some fun with code. Image scrollers are of course nothing new; versions of them come out all the time. Many of them however are user-initiated; meaning that in order for the currently displayed content to change, the visitor must click a button or perform some other action. This scroller will be different in that it will be completely autonomous and will begin scrolling once the page loads.
#3 jCarousel Lite
jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.
#4 jQuery Slider Start/Stop
There are many helpful improvements with this new slider. It’s not a plugin, so it’s not as easy as it possibly could be, but it’s much easier than the previous version. There is a section at the end for customizing. The slider does feature a stop/start button and the animation goes a little farther than simply sliding to the left.
#5 jQuery Blinds Slideshow using CSS Sprites
#6 How to Create a Simple iTunes-like Slider
The new transformation features brought by CSS3 to create a three dimensional dynamic slider effect. The techniques presented here – for creating sliders, and CSS dynamic resizable bars, can be used together or in part for powering all sorts of jQuery goodness.
#7 JCoverflip Features
jCoverflip has been developed to enable fast and granular customization of the look and feel and feature set.
#8 jQuery slideshow
Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.
#9 Create a Custom jQuery Image Gallery Slide Effect
This tutorial, we will learn how to build an unique jQuery script by modifying other plugin – create a Image gallery with jCarousel. A picture tells thousand words, we are going to transform jCarousel to this.
#10 Automatic Image Slider w/ CSS & jQuery
With the release of the iPad and its lack of support for flash, it has stirred up a lot of debates regarding the future of flash. With this in mind, I believe it is wise to build simple widgets like the image slider using HTML/CSS/Javascript, and leave more interactive applications for flash if needed. The html based image slider will have its benefits with search engine optimization and will also degrade gracefully for those who out javascripts.
#11 jQuery Slider
jQuery slider plugin that lets you easily create attractive js Sliders with very nice transition effects. Enhance your website by adding a unique and beautiful slider.
#12 Creating a Slick Auto-Playing Featured Content Slider
I love the Coda Slider plugin for jQuery. I’ve used it recently to build a couple of tabbed “widgets”. One here on CSS-Tricks in the sidebar to show Script & Style links, Featured Posts, and Popular Posts. Just kind of a fun way to show lots of content in a small area.
#13 jQuery slider Image Flow
Image Flow is an unobtrusive and user friendly JavaScript image gallery. For more information about Image Flow read the features list, take a look at the documentation and check the blog. For anything else simply drop a line in the shoutbox.
#14 Beautiful Background Image Navigation with jQuery
In this tutorial we are going to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position. The background image for each item will be animated to slide into place in different times, creating a really nice effect. The background image sliding direction from the list item in the middle will depend on which item the user was before: coming from the right, it will slide from the left and vice versa.
#15 iCarousel – Horizontal images slider
iCarousel is an open source (free) java script tool for creating carousel like widgets.
#16 Smooth Div Scroll
Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right. Apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scrolling to distinct steps. As the name of the plugin hints, scrolling is smooth. There are no visible buttons or links since the scrolling is done using hotspots within the scrollable area or via autoscrolling. Unobtrusive and smooth is the key here
#17 jsCarousel v2.0 is a jquery slider plugin
That slides contents in multi direction. Now it supports both horizontal and vertical orientation, see the screen shot below. jsCarousel v2.0 slider can be used as a feature content slider as well. You can put any kind of contents you want whether images, text, videos, news etc. it’s up to you. One interesting thing about jsCarousel v2.0 slider is that you can make simple image gallery with thumbnail support by using it. jsCarousel v2.0 slider plugin gives you the source of image via callback function, when you click on some image within slider. See Using jsCarousel v2.0 Slider section below to get an idea about using the callback function.
#18 bxSlider jQuery HTML Content Slider
BxSlider is a jQuery content slider and image slideshow that features horizontal, vertical, fade transitions and display and move multiple slides at once (carousel).
#19 Minimalistic Slideshow Gallery with jQuery
Minimalistic Slideshow Gallery with jQuery is a beautiful slideshow gallery that can be easily integrated in your web site. It has a container with a slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will slide out from the top and allow the user to navigate through a set of thumbnails.
#20 Build a Content Slider with jQuery
There are a ton of tutorials already out there about creating content sliders with jQuery. So why bother writing another one? While I don’t think that the existing tutorials are incorrect, bad, or otherwise unacceptable, I haven’t found one that met my needs.
#21 Moving Boxes jQuery slider.
I’m not going to throw a lot of source code at you this time. The big difference here is that there are buttons to change panels and the panels zoom in and out.
#22 Image Background Jquery Slideshow
#23 Create a unique Gallery by using z-index and jQuery
You can create an effect where pictures are animated to look like they were discarded one after the other by clicking. This is made using z-index and jQuery.
#24 Presentation Cycle jQuery Slider
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.
#25 Gallery jQuery Slider
Galleria is a JavaScript image gallery framework built on top of the jQuery library. The aim is to simplify the process of creating professional image galleries for the web and mobile devices.
Nice Collection of JQuery Sliders.
Very ncie collection of jQuery-Sliders, but if you want some more, dont’ miss, including some zooming plugins.
Nice!
thank you. I love jquery sliders.
Here’s one more example: the Ono List Pager demos: http://www.thebrightlines.com/onopager/website/
I like all of them. Thanks for the share!
very nice effort, thank u
Thank you..
No 8 is the BEST !
WOW. That #24 is impressive. I’m going to incorporate that into my site relaunch this month. Thank you for this post actually, you made my designer’s job WAY easier with an out-of-box concept that works.