More on jQuery: Slider Plugins and Tutorials

January 10th, 2011

There are a large amount of sites that use image sliders to emphasize content by using jQuery plugins. In today’s post we provide you with yet another collection of some fantastic resources for all of those among you who are interested in learning how to create image sliders with jQuery, and more!

jQuery Slider Plugins

Slidesjs is a crazy simple slideshow plugin for jQuery. It’s easy to implement, customize and style. What could be better? With features like looping, auto play, fade or slide transition effects, crossfading, image preloading, auto generated pagination, and the list goes on:

Nivo Slider
A simple jQuery slider with lots of transition effects and also easy to use and implement. One of the best jQuery image sliders out there:

jquery slider

AviaSlider is a jQuery plugin with 8 transition effects with lots of easy to set options to create your own effects including an image preloader:

Looped Slider
LoopedSlider is a plugin made for jQuery that solves a simple problem — the looping of slide content. It was created to be easy to implement, smooth and most of all end the “content rewind” that most other content sliders suffer from:

Coin Slider
Another jQuery image slider with unique transition effects and easy to use and implement and also compatible with most web browsers:

jCoverflip has been developed to enable fast and granular customization of the look and feel and feature set. Also, drag or click functionality enables to showcase featured content items on demand by the user:

s3Slider jQuery Plugin
s3Slider jQuery plugin is easy to use — first include the jQuery library then include the javascript in the head of the page(s) where you want to use s3Slider:

slideViewer is a lightweight (3.5Kb) jQuery plugin which allows you to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images:

jQuery Gallery Scroller (jqGalScroll) takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally. The plugin will also create pagination to allow you to flick smoothly through your photos:

Easy Slider 1.5
One of the easiest jQuery plugins for sliding images and content:

Coda Slider is a jQuery content slider with left and right slide navigation along with tab-type slide navigation included:

jQuery Plugin – Feature List
This jQuery plugin enables simple and easy creation of an interactive “Featured Items” widget:

Moving Boxes
Moving Boxes has been developed by CSS-Tricks — a unique kind of content slider you surely want to check. Why not give it a try now:

Coda-Slider 2.0
An interesting read. Also notice that the slider slides automatically, but will stop when the users clicks on any nav button:

bxSlider is a jQuery content slider and includes an image slideshow:

jQuery Easy Slides
Possibly the easiest among all jQuery plugins to use for making effective slideshows:

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:

Supersized jQuery Plugin
This is a simple full screen background slideshow plugin:

jqFancyTransitions is an easy-to-use jQuery plugin for displaying your photos in a slideshow along with a couple of fancy transition effects:

Galleria is an image gallery framework written in JavaScript. The aim is to simplify the process of creating visually appealing image galleries for the web and mobile devices:

jQuery Multimedia Portfolio
This plugin for jQuery will automatically detect the extension of each media and apply the adapted player:

jQuery SerialScroll
This plugin allows you to easily animate any series of elements, by sequentially scrolling them. It uses jQuery.ScrollTo to achieve the scrolling animation. It is a very unrestricted plugin, that lets you customize pretty much everything from outside. You can use horizontal or vertical scroll, as well as combined:

Slideshow 2!
Slideshow 2! is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website. Try it out:

AnythingSlider jQuery Plugin
As the name already says, you can slide basically anything (images or content, or both) using this jQuery slider plugin:

jQuery Slider Tutorials

Create Featured Content Slider Using jQuery UI
Here you can learn how to create a featured content slider for your website using the jQuery UI library:

Create a Beautiful jQuery Slider tutorial
This tutorial explains how to develop jQuery sliders with image descriptions and name:

Animate Panning Slideshow with jQuery

In this tutorial we’ll take the makings of a classic slideshow, but use a different kind of transition to animate between slides:

Create an Image Rotator with Description (CSS/jQuery)
This tutorial will let you learn how image rotation works and how to create image rotator with CSS and jQuery:

Using the Wonderful jFlow Plugin
A beautiful use of jFlow Plugin has been shown on Nettuts+ network. Check out this tutorial:

Slide Thumbs
In this tutorial it’s explained how to turn old boring image viewer into a nice-looking one with jQuery:

Making A Slick Content Slider
A sleek content slider with the help of jQuery and the MopSlider plugin:

A Beautiful Apple-style Slideshow Gallery With CSS & jQuery
There is no need for a database nor a PHP back-end for this gallery. This means that it is really easy to incorporate into an existing site – you just have to change a few lines of html code:

Create a Slick and Accessible Slideshow Using jQuery
A nice tutorial on Six Revisions on how to create a slick content slideshow using jQuery:

Making a Mosaic Slideshow With jQuery & CSS
A very detailed and advanced tutorial on how to create a mosaic slideshow by using CSS and jQuery:

Advanced jQuery background image slideshow
A very well explained tutorial on how to create a background image slideshow:

Automatic Image Slider w/ CSS & jQuery
Soh Tanaka created one of the best image slider tutorials — you must check this one out to learn how to create a beautiful automated image slider using CSS and jQuery:

How to Create a Simple iTunes-like Slider
Take a look at how to create a slider similar to the one used in the iTunes store:

Build a Content Slider with jQuery
A tutorial that is a bit different than the rest: explains how to create an easy-to-implement content slider plugin, allowing multiple instances on a page, allowing users to customize the size, button images, etc. and finally, how to create valid markup:

Create a Custom jQuery Image Gallery with jCarousel
A nice tutorial on creating a jQuery image gallery using jCarousel:

Simple JQuery Image Slide Show with Semi-Transparent Caption
Here you can learn how to create a simple image slide show with a semi-transparent caption with jQuery:

Making a Content Slider with jQuery UI
In this tutorial we’re going to be using the jQuery UI slider widget to create an attractive and functional content slider:

Creating a Rotating Billboard System with jQuery and CSS
In this tutorial we will use some images, CSS and jQuery to create the effect of a rotating billboard with two ads:

Step By Step To Create Content Slider using jFlow, A Minimalist jQuery Plugin
Here you will need to have some basic XHTML/CSS and JavaScript skills — you can then learn how to use jFlow, a minimalist jQuery plugin to create a content slider:

Content Slider Using CSS and Jquery
In this tutorial you can learn how to create a slider which can be used to slide your content of any website:

Creating a Slick Auto-Playing Featured Content Slider
A nice tutorial on how to create a slick auto-playing featured content slider:

Further Resources

All About jQuery: Plugins, Tutorials and Resources
50 Useful jQuery Plugins to Enhance your Forms
50 Useful JavaScript and jQuery Techniques and Plugins


Hi, I'm Prakash Ghodke, an 18 year old from India working as freelance Web/Graphics Designer. Owner of Webdesignersdesk where i share tutorials and resources related to web design and web development. You can follow me on twitter.

Tags: ,

32 comments for „More on jQuery: Slider Plugins and Tutorials
  1. Vivek Parmar on January 10th, 2011 at 2:19 pm

    That’s a huge list, so many plugins on jquery slider. didn’t know about this thanks for sharing

  2. Ejaz on January 10th, 2011 at 6:51 pm

    Great list Parakash,
    The awesome Orbit could be another great addition to this list

  3. mike ilz on January 10th, 2011 at 9:57 pm

    I use the nivo slider on so many sites, so quick to use and edit. Check out the FancyMoves slider I created for a download too!

  4. Mike on January 10th, 2011 at 11:06 pm

    I’ve used more than one of those. For putting in various types of HTML, the AnythingSlider is great.

  5. Tiago on January 11th, 2011 at 12:38 am

    slideViewer? codaslider? Mostly old stuff.. Man, how long have you been offline?

  6. AJ Clarke on January 11th, 2011 at 3:21 am

    Cool another great list. It seems like these js slider plugins keep getting better and better and better. Yea! I really love the first one “slidesjs” thanks for the link, going to use right away!

  7. Anders Haig on January 11th, 2011 at 4:48 am

    Nivo is a close second but as far as sliders that are easy to use and style, SimpleSlide ( takes the cake.

  8. Divorce Attorney Pasadena on January 11th, 2011 at 9:08 am

    More on jQuery: Slider Plugins and Tutorials – Noupe Design Blog Is it possible be writing more about this subject?

  9. El on January 11th, 2011 at 10:33 am

    Great article.

  10. Rahmanuddin Shaik on January 11th, 2011 at 12:02 pm

    Good Article, but should have provided a live working here itself as well.
    Thanks a lot

  11. Marty McColgan on January 11th, 2011 at 2:52 pm

    good list this will come in handy!! cheers!

  12. neo on January 11th, 2011 at 8:13 pm

    thanks for this stuff. now i could add effects to my flat-affect site. lol :)

  13. Cille on January 11th, 2011 at 9:13 pm

    Cool another great list. It seems like these js slider plugins keep getting better and better and better.

  14. Cgbaran on January 12th, 2011 at 1:23 pm

    Great round up thanks

  15. Johan on January 14th, 2011 at 3:44 pm

    I have been using Nivo Slider for some time now and it is great and very easy to set up but I have experienced two issues with this slider.

    Firstly, it does not use accessible html because the images are not wrapped in a list or other type of container.

    The second issue is that there is no effect for horizontally scrolling slides. Even though it does a lot of other effects such as swipes and fades, I sometimes miss the horizontal sliding effect.

    Because this article mentions so many sliders I cannot possibly try them all, so if anyone could recommend an alternative slider that overcomes these two issues this would be greatly appreciated :)

  16. Rana Mukherjee on January 18th, 2011 at 1:55 pm

    I like nivo slider.

  17. Gabe on January 18th, 2011 at 10:02 pm
  18. Yhanpolo on January 19th, 2011 at 10:37 am

    I have already used some of the jquery plugins above but there are new plugins that I think are much more suitable to the website that I have worked on before. Thanks for this list.

  19. Stewart on January 19th, 2011 at 1:47 pm

    I personally love the BX Slider you can literally do anything with it. Horizontal/vertical scrolling, easing, use anything for the navigation be it next previous arrows, individual text or image links, navigation div can be put anywhere. And it’s totally simple and valid. Have used Nivo Slider and coda slider a few times. Nivo not so good, can be a pain to setup properly.

  20. Victor on January 20th, 2011 at 3:21 pm

    Great compilation! I like Codrops sliders, also WOW slider,, really cool effects

  21. Hades on January 25th, 2011 at 11:13 am

    Thank you very much! It’s really beautiful !!!!

  22. Marshal on January 27th, 2011 at 7:30 am

    Cool!!.Thank you for sharing.

  23. Marcin on January 27th, 2011 at 2:38 pm

    Great list!

    Check out MobilySlider:

  24. Saurabh on February 11th, 2011 at 8:57 am

    Thanks for your great support.

  25. Seema Kauser on March 24th, 2011 at 2:03 pm

    Thanks for sharing this info. Great Job !

  26. riffbird on March 27th, 2011 at 4:45 pm

    nice collection of jquery slideshow.
    Thanks to sharing.

  27. Venkatesh on July 2nd, 2011 at 1:29 pm

    Really It’s very nice Stuff…

  28. jacob on August 23rd, 2011 at 6:39 am

    nice collections, thanks for sharing this

  29. Darlene on August 25th, 2011 at 1:29 am

    Wow, thanks ! Great help. This is what I need for my site.

  30. jayendra on March 12th, 2012 at 12:50 pm

    Thanks to share. Nice collection.

  31. Riya on August 25th, 2012 at 11:45 am

    Good sliders

  32. Leslie Brown on November 8th, 2012 at 8:45 pm

    Thanks for compiling this list, some of the examples here are turning out to be better than paid versions!