Useful jQuery Image Galleries, Content Sliders and Carousels

15 jQuery Space-Saving Content Sliders and Carousels

Have you noticed that, for instance, when browsing the latest WordPress themes, they almost all include a slider of some sort, whether it is an image gallery or a content slider, or better still, has the capability to incorporate both?

Sliders are becoming increasingly popular because they resolve a lot of space problems. Content sliders can offer the viewer a lot of information in a small space, and both content sliders and image galleries can provide user-interaction.

Here we have rounded-up 15 jQuery content sliders and carousels, including a couple of tutorials, for your perusal.

Space Saving Content Sliders and Carousels

jQuery Space-Saving Content Sliders and Carousels

TN3 Gallery
TN3 Gallery is a jQuery image gallery with slideshow, transitions effects, multiple album options, CSS skinning and much more. It’s compatible with all modern desktop and mobile browsers. It’s the world’s best photo gallery.

TN3 Gallery

Anything Slider
A fully-featured, customizable content or slide show slider.

Anything Slider

Slide Deck
Slide Deck comes bundled with a bunch of super-awesome features designed to save you development time and give you the flexibility to use it in a variety of ways – whether you’re building anything from an image gallery, to a product tour and lots of things in-between.

Slide Deck

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.

Build a Content Slider with jQuery

jQuery Slider Shock
SliderShock is bundled with a lot of features that you’ll find very useful, such as slides thumbnails, 3D animation, responsiveness, custom patterns and much more.

jQuery Slider Shock

Slider Gallery
This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff. jQuery already has the plugins to create these effects so we don’t have to go about creating them ourselves from scratch.

Slider Gallery

Compact News Previewer
The news previewer will show some list of articles on the left side and the preview of the article with a longer description on the right. Once a news on the left …

Compact News Previewer

Awkward Showcase
Awkward Showcase is a plugin for the JavaScript Framework jQuery. We call it a Content Slider. But it can do more then just slide the content.

Awkward Showcase

Coda Slider Effect
Recreating this effect is simple to do if you know what plugins to use. There are plugins out in the wild already, but we want our jQuery to satisfy the following requirements: Degrades perfectly without JavaScript enabled, Sliding panels effect without hogging browser CPU, Next and previous buttons added using JavaScript because they hold no use without JavaScript.

Coda Slider Effect

Smooth Div Scroll
The basic principle behind Smooth Div Scroll is simple: let one div  scroll inside another div.Ether two hotspots are used to trigger the actual scrolling or you can let it autoscroll. The scroll Wrapper determines how much of the scrollableArea that should be visible – everything outside the scrollWrapper is hidden from view.

Smooth Div Scroll

Wow Slider
The most strong and popular web design trend over last couple of years is a sliding horizontal panels also known as Sliders or Carousels. It’s a very effective method to increase the web site usability and engage the user.

Wow Slider

Simple Controls Gallery
Displays images either as an automatic or manual slideshow, with the image faded into view over the previous. A Navigational Panel slides up when the mouse rolls over the gallery to play, pause, or step through to a specific image within the gallery. In automatic mode, set the number of cycles before the script stops rotating.

Simple Controls Gallery

Making a Content Slider With jQuery
There will be too many of these elements to display at once, so we can use the slider to move the different content blocks in and out of view. jQuery UI is the official library of widgets and utilities built on top of jQuery; it’s very easy to use, highly configurable and robust, and extremely easy to theme.

Making a Content Slider with jQuery

Start And Stop Slider
A little while back Chris Coyier did a tutorial on a Featured Content Slider. It was neat, but a little limited in customization possibility. The two most requested features were being able to add/remove “panels” and a stop/start button.

Start and Stop Slider

Agile Corousel Slider
Implement your slideshow with the Agile Carousel JQuery plugin. Highly customizable so you can build according to your requirements. JSON data format is used to provide easier integration with external data or data from your CMS. Use it for agile web development.

Agile Carousel Slider

Create a Slick and Accessible Slideshow
Create a usable and web accessible slideshow widget for your site using HTML, CSS, and JavaScript (jQuery). In the process, you’ll see the concept of Progressive Enhancement in action.

Create a Slick and Accessible Slide Show


There is no doubt that sliders of one kind or another are becoming the trend, they are eye-catching and effective, as well as providing enormous space-saving opportunities.

Do you have a favorite slider or carousel that we have missed from this list? Please share your links and comments with us in the section below.

Lax is a creative designer, bloggers, author and front end developer for many projects online. One of his recent project as front end developer is mom grocery. You'll find him playing EA Sports cricket when he isn't designing or developing anything.


    • Shekhar,
    • May 22, 2012
    / Reply

    Here is one, two in one and quite useful:

  1. / Reply

    I always use Cycle just because of the seeming endless amount of options –

    • Saya,
    • May 23, 2012
    / Reply

    Some are very unique I like TN3 and Smooth Div- thanks

  2. / Reply

    Great list.Thanks for sharing:)

    • TheAL,
    • June 16, 2012
    / Reply

    Easy Accordian, a really nice/free alternative to Slide Deck:

    1. / Reply

      Awesome! I was just looking into purchasing slidedeck :) Easy accordion will work just fine for my new project.. Thanks!

  3. / Reply

    Thanks, It’s a inspiration can to develop my website.
    Now jQuery more than java script. It’s a object and to be flash.

  4. / Reply

    thanks alot ,,, nice collection

  5. / Reply

    Thanks. This is really a greate list “Laxman”.

  6. / Reply

    thanks alot nice collection.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.


Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.