jQuery Scripts for Creating Cool Image Slideshows

Read the full post

The good old slideshow is one Javascript powered effect that will never go out of fashion. Slideshows are often used to showcase multiple images sequentially, or to feature a site’s popular content at the top of the homepage. This collection of jQuery plugins and tutorials will help you create your own jQuery powered slideshow, with various styles and options to choose from.

jQuery Slideshow Plugins

Don’t fancy getting your hands dirty with Javascript code? I don’t blame you! It can be a little tricky getting these scripts to work correctly. Thankfully there’s plenty of resources available online that allow us to download ready-made slideshow scripts that can be added to your own web projects with minimal effort.

Easy Slider 1.7

Download the plugin

Download the plugin


Download the plugin

Download the plugin


Download the plugin

Download the plugin

Nivo Slider

Download the plugin

Download the plugin


Download the plugin

Download the plugin

Coin Slider

Download the plugin

Download the plugin


Download the plugin

Download the plugin

TN3 Gallery

Download the plugin

Download the plugin

jQuery Slideshow Tutorials

Keen to learn how to build your own slideshow or tailor the style exactly to your own design? This collection of tutorials will take you through each step of building your very own jQuery powered slideshow, covering the HTML code, the CSS styling and of course the Javascript coding.

Creating a Slick Auto-Playing Featured Content Slider

View the tutorial

View the tutorial

Build a Simple Image Slideshow with jQuery Cycle

View the tutorial

View the tutorial

How To Build a Sliding Feature Slideshow with jQuery

View the tutorial

View the tutorial

How to Make Auto-Advancing Slideshows

View the tutorial

View the tutorial

Sweet Thumbnails Preview Gallery

View the tutorial

View the tutorial

Rotating Image Slider with jQuery

View the tutorial

View the tutorial

Animate Panning Slideshow with jQuery

View the tutorial

View the tutorial

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • web designing in gurgaon

    I'm building a small social network for my school and i know PHP but i want to build an auto refresh javascript stream, streaming all the data from a database in time order. all the posts have a timestamp.

    • Aakash

      you need to use AJAX for that :-)

  • AviaT-

    Very useful list, bookmarked for later use.


  • Nikos Tsaganos

    Great resources!

    I've made 3 slideshows using the jquery cycle plugin, that are available for free download and use here:

  • Brent

    Great list! Zurb's Orbit plugin is also quite nice.

  • Alex

    Saved for the future updates.


  • Web designing in chennai

    any1 know sliders that joins the chain only after loading ? so that i can have n number of slides without load time

  • jQuery By Example

    Great collection..

  • website design cambridge

    great collection your hard work and effort do pay off. :P

  • Bobby

    Amazing! Thanks for tutorials, I will try to create my own slider some time.

    I also recommend bxSlider, Similar to anythingSlider, but a bit stripped down on features. Here's a link:

  • ravindranath

    I have tried easy slider and but i feel jQuery slideViewer 1.2 should be in the list. Its very fast and lightweight. easy to customize too.

    Nice collections btw :)

  • Abid

    Mine is also one of the newer galleries doing the rounds:

  • Sexleksaker

    Thanks for sharing these SlideShow resources. I've been meaning to add a slide show on frontpage. Now I just need to choose which one. It is not so easy.

  • X Studios Web Design

    Sometimes, JQuery makes things so much easier.

    While I do like sliders, sometimes simple interactive elements on a page are a better choice.

  • web design hull

    Great collection of sliders, I've used a few of these but will definitely investigate some more of them… thanks for sharing

  • Custom SMF Themes

    Very useful, thanks

  • Javier

    Awesome collection!

    Has anyone found a tutorial on how to create a slideshow like this one:

    I have been scouring the web trying to find a slide show that allows you to animate different elements in a 'slide' individually… I've been going mad not knowing what key words to search for, or if it even exists :|

  • Jordan Terry

    I absolutely love easySlider, it is so versatile. I have used it for Website headers as well as for normal image sideshows.

    This is a great collection. I will refer to this in the future! Great Job.