Line25

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

Slides

Download the plugin

Download the plugin

AnythingSlider

Download the plugin

Download the plugin

Nivo Slider

Download the plugin

Download the plugin

Gelleria

Download the plugin

Download the plugin

Coin Slider

Download the plugin

Download the plugin

AviaSlider

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.

21 Comments

  1. 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.

  2. AviaT- says:

    Very useful list, bookmarked for later use.

    Cheers!

  3. Great resources!

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

    http://www.backslash.gr/content/blog/webdevelopment/2-create-beautiful-slideshows-with-jquery-cycle

  4. Brent says:

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

  5. Alex says:

    Saved for the future updates.

    Thanks!

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

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

  8. Bobby says:

    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: http://www.bxslider.com

  9. ravindranath says:

    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 :)

  10. Abid says:

    Mine is also one of the newer galleries doing the rounds: http://crft.it/5

  11. Sexleksaker says:

    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.

  12. Sometimes, JQuery makes things so much easier.

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

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

  14. Javier says:

    Awesome collection!

    Has anyone found a tutorial on how to create a slideshow like this one: http://www.twofold.com/

    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 :|

  15. Jordan Terry says:

    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.

Comments are now closed