50+ Useful jQuery Image Slider Roundup

jQuery image slider and jQuery Carousel plugins have become increasingly popular ingredients in web pages over the last year or so.

Main reason for this is that image sliders are very powerful for featuring top content in a visual and appealing way. This, without taking too much of the limited space e.g. on front pages of websites.

Not only are images supported, a recent trend in this area shows that also videos and even layered HTML with animations, known as jQuery content sliders are supported.

In my opinion popular JavaScript frameworks like jQuery have made, what was once only for hardcore developers, easily available to any web designer. The massive popularity of jQuery has attracted many talented developers that are constantly releasing all kinds of amazing and powerful jQuery plugins.

This of course also includes versatile and sleek plugins for adding all kinds of sliders, even mobile friendly reponsive jQuery sliders are available and will fit well to a responsive website. In this article, I have collected some of the best jQuery image sliders and tutorials for your inspiration and I also give some tips for choosing the right jQuery image slider.

Disclosure: Please note that some of the links below are affiliate links and I will earn a commission if you purchase through those links (at no extra cost to you). I recommend that you do your own independent research before purchasing any product or service. This article is not a guideline, a recommendation or endorsement of specific products.

[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);echo $filestr;[/exec]

Article Index

• jQuery Image Slider collection
• Tips for choosing the right jQuery image slider

jQuery Image Slider collection

All in one jQuery Banner Rotator / Content Slider / Carousel

All in one banner rotator is powerful jQuery plugin that you can be configured to act as Banner Rotator, Thumbnails Banner, Banner with Playlist, Content Slider and Carousel. I have added it here even though it is much more than a jQuery image slider because it is awesome – by CodeCanyon (Premium Plugin)

MORE INFO DEMO

Slider Revolution Responsive jQuery Plugin

Turn simple HTML markup into a responsive(mobile friendly) or full width slider with must-see-effects and meanwhile keep or build your SEO optimization (all content always readable for search engines). See the heaps of custom transitions/animations for each object on the page! Customize this slider with just a little HTML and CSS to your very needs.

This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects. All customization can be handled via jQuery Options, HTML 5 data-attributes and CSS – by CodeCanyon (premium plugin)

MORE INFO DEMO

SlidesJS

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 – by SlidesJS (Free Plugin)

MORE INFO DEMO

jQuery Banner Rotator / Slideshow

This is a jQuery banner rotator plugin featuring multiple transitions. The thumbnails and buttons allow for easy navigation of your banners/ads. The banner rotator is also re-sizable and configurable through the plugin’s parameters – by CodeCanyon (premium plugin)

MORE INFO DEMO

Wow Slider

WOW Slider is a jQuery image slider with stunning visual effects (Blast, Fly, Blinds, Squares, Slices, Basic, Fade, Ken Burns, Stack, Stack vertical and Basic linear) and tons of professionally made templates. WOW Slider is packed with a point-and-click wizard to create fantastic sliders in a matter of seconds without coding and image editing. WordPress slider plugin and Joomla slider module are available also – by Wow Slider (Free Plugin)

MORE INFO DEMO

Avia Slider

This jQuery image slider plugin features 8 unique transition effects, image preloader, autoplay that stops on user interaction and lots of easy to set options to create your own effects.

MORE INFO / DEMO – by CodeCanyon (premium plugin)

Easy Slider

Easy Slider is a jQuery plugin, you can set up your own options and is easy to implement.

MORE INFO / DEMO

Factory Galleries

You can create all Galleries you want with elegance and style. The sliding wffect for both images and text is pretty cool.

MORE INFO / DEMO – by CodeCanyon (premium plugin)

UnoSlider for WP – Responsive Touch Enabled Slider

UnoSlider is a jQuery content slider plugin with  unlimited transition animations (really, unlimited!). It also has a wide range of a features like touch enabled, mobile optimized interface, animated layers, responsiveness and a lot of other features.

MORE INFO | DEMO – by CodeCanyon (Premium Plugin)

ResponsiveSlides.js

ResponsiveSlides.js are a tiny jQuery plugin that creates a responsive slider using list items inside <ul>. It works with a wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don’t natively support it.

MORE INFO | DEMO – by Viljamis (Free Plugin)

RoyalSlider – Touch-Enabled jQuery Image Gallery

RoyalSlider is easy to use jQuery image gallery with animated captions, responsive layout and touch support for mobile devices. Easily add an unlimited number of slides and captions. Use it as image slider, image gallery, banner rotator, banner ads, or even presentation.

MORE INFO | DEMO – by CodeCanyon (Premium Plugin)

ImageFlow

ImageFlow is an unobtrusive and user friendly JavaScript image gallery.

MORE INFO / DEMO (Free Plugin)

Translucent – Responsive Banner Rotator / Slider

This is a jQuery Banner Rotator / Slideshow with translucent background set for caption.
Supports Responsive and fluid layouts. Supports touch swipe navigation on iPad and Android tablets.

MORE INFO | DEMO – by CodeCanyon (Premium Plugin)

Elastislide – A Responsive jQuery Carousel Plugin

Elastislide is a responsive jQuery carousel that will adapt its size and its behavior in order to work on any screen size. Inserting the carousels structure into a container with a fluid width will also make the carousel fluid.

MORE INFO | DEMO – by Codrops (Free Plugin)

Coin Slider

This jQuery slider features smooth transition effects

MORE INFO / DEMO (free jQuery plugin)

Saloon

Saloon is a jQuery Banner Rotator which animates your image and text slides with transition effects of the wide library. Easy installation, great transitions and text animations define the freshline style. See the heaps of custom transitions/animations for each object on the page! Customize this slider with just a little HTML and CSS to your very needs. Give each slider a description and more elements to transport your message. The touch style drag and rool feature if pretty cool.

MORE INFO / DEMO – by CodeCanyon (premium plugin)

DualSlider

With DualSlider, you can slide your images while leaving a space for the description and other details.

MORE INFO / DEMO (free jQuery plugin)

CCSlider – jQuery 3d Slideshow Plugin

CCSlider is an unique jQuery slideshow plugin. It supports 3d transitions! There are 14 stunning 3d transitions available, and also 16 stylish 2d transitions. You have the option for mentioning a 2d transition fallback for old browsers that don’t support HTML5 Canvas, which is used for producing the 3d transitions. The plugin also supports HTML captions, autoplay of slides, custom HTML content and custom transitions per slide. See below for a list of features available in the plugin.

MORE INFO | DEMO – by CodeCanyon (Premium Plugin)

Flexslider

An awesome, fully responsive jQuery slider plugin.

MORE INFO | DEMO – by Woo Themes (Free Plugin)

Yoxview

YoxView is a free image and video viewer for websites. It’s written in javascript using jQuery and is available as a jQuery plugin.

MORE INFO | DEMO (Free Plugin)

Moving Boxes jQuery slider

MORE INFO | DEMO (Free Plugin)

Simple Controls Gallery v1.3

Simple Controls Gallery rotates and displays an image by fading it into view over the previous one, with navigation controls that pop up when the mouse rolls over the Gallery.

MORE INFO | DEMO (Free Plugin)

HTML5 JQUERY SLIDER

This effect creates progressively enhanced slideshow with a fancy transitioning effect.

MORE INFO / DEMO (free jQuery plugin)

Anything Slider

AnythingSlider is a jQuery image slider Plugin with a lot of features( Slides can be anything, Navigation tabs are built and added dynamically.

MORE INFO | DEMO – by CSS-Tricks (Free Plugin)

Easing Slider

MORE INFO / DEMO – by Matthew Ruddy (free plugin)

FancyMoves

FancyMoves is a great jQuery image slider to show off services, products, or whatever you can dream up. The main image is enlarged to attract your focus. There are three ways to navigate to the next / last item: using your keyboard arrows, using the left and right arrows on the sides of the slider, or simply clicking on the next or last item in the slider.

MORE INTO / DEMO

Pikachoose

PikaChoose is a lightweight jQuery slider plugin allowing for easy presentation of photos with carousels and lightboxes! Pikachoose is designed to be easily installed and easy to setup.

MORE INFO | DEMO (Free Plugin)

Sexy Slider

SexySlider is a jQuery slider plugin that lets you easily create powerful javascript Sliders with very nice transition effects. Enhance your website by adding a unique and attractive slider!

MORE INFO / DEMO – by CodeCanyon (premium plugin)

JqFancy Transitions

jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.

MORE INFO / DEMO

Galleria

Galleria is a JavaScript image gallery framework built on top of the jQuery library. Its goal is to simplify the process of creating professional image galleries for the web and mobile devices.

MORE INFO | DEMO (Free Plugin)

Layer Slider

This is a jQuery content slider using the famous parallax-effect! You can create as many layers and sublayers as you want. You can use images or any other HTML elements, including Flash movies as layers. The script is very user-friendly, you can add global settings or local (per slide) settings to each layer or sublayer. You can change delay times, easing types, durations and much more.

MORE INFO / DEMO – by CodeCanyon (premium plugin)

Animate Panning Slideshow with jQuery

The makings of a classic slideshow, but use a different kind of transition to animate between slides. It may not fit every project, but diversity is always welcome in the world of web design.

MORE INFO | DEMO (Free Plugin)

Responsive Image Gallery

Responsive image gallery has a thumbnail carousel using Elastislide. Inspired by Twitter’s “user gallery” and upon a request to show  integration of Elastislide, the designers of this  gallery wants to implement a responsive gallery that adapts to the viewport width. The gallery allows you to view it with the thumbnail carousel or not using a view switch.

MORE INFO  |  DEMO – by Codrops (Free Plugin)

Slick Auto Playing Content Slider (tutorial)

MORE INFO | DEMO (Free Plugin)

ImageSwitch (tutorial)

The main point of this plug-in is to make an easy-to-use, simple and fast plug-in to create effect when you switch between images.

MORE INFO | DEMO (Free Plugin)

Highslide

Highslide JS is an image, media and gallery viewer written in JavaScript. Some of the features worth mentioning: Quick and elegant looking, no plugins like Flash or Java required, popup blockers are no problem. The content opens within the active browser window. Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.

MORE INFO | DEMO (Free Plugin)

Dragdealer

Dragdealer is much more than a simple jQuery image slider. It offers a wide variety of features related to dragging, but is also quite powerful for creating different types if image sliders.

MORE INFO / DEMO

Cycle

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more.

MORE INFO / DEMO (free jQuery plugin)

Apple Style Slideshow (tutorial)

MORE INFO | DEMO (Free Plugin)

Gallerific

Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos.

MORE INFO | DEMO (Free Plugin)

Agile Carousel

Jquery plugin that allows you to easily create a custom carousel. Call Jquery UI to enable many different additional transition types and easing methods. Uses PHP to draw images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more!

MORE INFO | DEMO (Free Plugin)

jQuery Image Scroller (tutorial)

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.

MORE INFO | DEMO (Free Plugin)

Create Featured Content Slider Using jQuery UI

Showing off the best content of your website or blog in a nice intuitive way will surely catch more eyeballs. Using an auto-playing content slider is the one of techniques to show your featured content. It saves you space and makes for a better user experience, and if you add a pinch of eye candy to it, then there’s no looking back.

MORE INFO | DEMO (Free Plugin)

Thumbnails Navigation Gallery with jQuery

Thumbnails Navigation Gallery with jQuery is an extraordinary gallery with scrollable thumbnails that slide out from a navigation. It has a menu of albums where each item can reveal a horizontal bar with thumbnails when clicked. The thumbnails container will scroll automatically when the user moves the mouse to the left or the right.

MORE INFO / DEMO (free jQuery plugin)

Horinaja

Horinaja is a ready-to-use slide-show implementation, utilizing either scriptaculous/prototype or jQuery. A running example above

• allows you to use a mousewheel for navigation.
• automatically create slide indices (pagination), if required

MORE INFO | DEMO (Free Plugin)

A Bullet-Proof Content Viewer

MORE INFO | DEMO (Free Plugin)

Simple Slide

Simple Slide is a jQuery slideshow plugin. It’s easy to use, small and flexible.

MORE INFO | DEMO (Free Plugin)

Simple iTunes-like Slider

Let’s take a look at how to create a slider similar to the one used in the iTunes store.

MORE INFO | DEMO (Free Plugin)

HisjSlide JS

Highslide JS is an image, media and gallery viewer written in JavaScript.

MORE INFO / DEMO (free jQuery plugin)

Supersized

Supersized is a fullscreen slidehow jQuery plugin. It supports image preloading with image cycling with transitioning effect.

MORE INFO | DEMO (Free Plugin)

Orbit

Orbit is a killer jQuery image slider plugin that lets you create a simple, effective and beautiful slider for images of any size, and even includes some parameters for making awesome captions and a sweet timer.

MORE INFO

Tips for choosing the right jQuery image slider

Don’t rush and select a jQuery image slider scripts just yet… before you decide on a specific image slider solution there’s a few tips and some guidance I would like to share with you.

• Check for recent updates and support: We try our best to keep our resource articles up to date, but there is always a risk that jQuery plugins not supported anymore. This risk is highest with free plugins, but developers of premium plugins can also drop the project.
• Will an image slider do the job? Featuring content using an image slider may be enough for most websites. Especially if, the slider allow for captions (text like a title and an excerpt) to be added as overlay. Still in some cases testing a form build directly into the slider area or adding animations to slider elements may be needed for increasing visitor conversion rates (percentage of visitors taking the action you want them to). In this case, you need more flexible jQuery sliders with support for HTML content.
• Slider controls: Know your requirement both related to what you need to configure as default actions and what users can do. This could be everything from touch support on mobile devices, delay between slides, look and feel / graphics used for controls etc.
• “Heavy duty – Do it all” script or lightweight: Load time is a critical parameter for all websites. Unfortunately, everything we add to a web pages increase the time it takes to download. While “feature-heavy” scripts may be much more likely to meet future needs, you should always keep an eye on the script size if performance is a really critical factor!
• What image transitions and animations will you need?: jQuery image sliders often include a set of fancy transitions you can use to make the slideshow more interesting. Some also include animation like e.g. the popular Ken Burnes zooming effect. Be clear on what you need and spend some time looking at script demos. The animations must be smooth and look awesome!
• What browser clients to support? Responsive sites are so hot right now… So what if your site is going to be responsive or if you have a dedicated mobile site? I would say you need a responsive image slider plugin. Further it should be a slider with build in support for tough interactions. There are not that many responsive jQuery slider scripts available yet so if you don’t need it… the availability will be much larger.

Lars

Lars is passionate about web design, web development, SEO, social media and loves to look into new technologies, techniques, tools etc. and to write articles for tripwire magazine readers.