25+ jQuery Slider Examples


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.
jQuery Slider

Tutorial|View Demo


#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.
jQuery Slider

Tutorial|View Demo


#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.
jQuery Slider

Tutorial|View Demo


#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.
jQuery Slider

Tutorial|View Demo


#5 jQuery Blinds Slideshow using CSS Sprites

jQuery Slider

Tutorial|View Demo


#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.
jQuery Slider

Tutorial|View Demo


#7 JCoverflip Features

jCoverflip has been developed to enable fast and granular customization of the look and feel and feature set.
jQuery Slider Menu

Tutorial|View Demo


#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.
jQuery Slider

Tutorial|View Demo


#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.
Custom jQuery Slider

Tutorial|View Demo


#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.
jQuery Slider

Tutorial|View Demo


#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.
jQuery Slider

Tutorial|View Demo


#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.
jQuery Slider

Tutorial|View Demo


#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.
jQuery Slider

Tutorial|View Demo


#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.
jQuery Slider

Tutorial|View Demo


#15 iCarousel – Horizontal images slider

iCarousel is an open source (free) java script tool for creating carousel like widgets.
JQuery Slider

Tutorial|View Demo


#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
jQuery Slider

Tutorial|View Demo


#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.
jQuery Slider Effect

Tutorial|View Demo


#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).
Jquery Slide Effect

Tutorial|View Demo


#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.
jQuery Slider Download

Tutorial|View Demo


#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.
Jquery Slider

Tutorial|View Demo


#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.
jQuery Slider Effect

Tutorial|View Demo


#22 Image Background Jquery Slideshow

Jquery Slide Effect

Tutorial|View Demo


#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.
Jquery Slide Gallery Effect

Tutorial|View Demo


#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.
Jquery Slider Effect

Tutorial|View Demo


#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.
jQuery Slider

Tutorial|View Demo


Oct.23, 2011/AJAX/JS, Coding, Showcases, Tutorials/Comments 11

11 Comments to “25+ jQuery Slider Examples”

  1. Web Design Company Mumbai | October 24th, 2011 at 05:28

    Nice Collection of JQuery Sliders.

  2. Webdesign Blog | October 25th, 2011 at 08:55

    Very ncie collection of jQuery-Sliders, but if you want some more, dont’ miss, including some zooming plugins.

  3. Dubai website design | October 26th, 2011 at 10:03
  4. @eduvergara | October 27th, 2011 at 12:27

    Nice!

  5. alovilla | November 23rd, 2011 at 14:50

    thank you. I love jquery sliders.

  6. Wouter Bos | January 6th, 2012 at 22:42

    Here’s one more example: the Ono List Pager demos: http://www.thebrightlines.com/onopager/website/

  7. Lee | January 18th, 2012 at 11:38

    I like all of them. Thanks for the share!

  8. Sadat Mirza | January 25th, 2012 at 23:31

    very nice effort, thank u :)

  9. Damith Wanninayake | February 8th, 2012 at 04:39

    Thank you..

  10. Daan | March 1st, 2012 at 14:58

    No 8 is the BEST !

  11. Top Five | April 1st, 2012 at 21:14

    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.