55+ Awesome jQuery Slider Plugins

For designers jquery is a key tool and its UI slider plugin makes selected plugins into slider. The demand for jquery slides are continuously growing. These slides help you to show your bulk contents in a limited space. completion of these slides in your site will makes your site highly customizable.

jQuery slider plugins are very useful and increasingly popular web page elements used for highlighting important content. By using jQuery slides, one can create amazing HTML slider effects with fancy animations of content elements like text and images. jQuery takes care of the difficult aspects like browser support and typically when using jQuery plugins it can be done with very little coding. This have made jQuery sliders and jQuery banner slideshow scripts very popular on most types of websites where they are used to feature multiple products, news etc. without taking up a lot of space. In fact, we see sliders on most news and business websites today and they are on the most important location over the fold in the front page.

jQuery effects work wonders in our web designs, it makes sense that we take steps to acquire a size-able collection of ready to use plugins in various categories. To make life easier easy for you, we are highlighting a substantial array of awesome jQuery slider effects. I hope this can save you time find the right solution for your projects. I added some tips for choosing the right slider as well at the end of the post – read through this to be more clear on the requirements you have for your slider solution. I update the article often and add new cool jQuery sliders, check all links etc. My latest update focused on adding responsive sliders, as jQuery plugins for creating responsive layouts are so hot and on removing old and obsolete scripts!


Lush – Content Slider – MORE INFO / DEMO

Lush - Content Slider is one of the most interesting jQuery slider solutions available right now and the slider builder tool makes it very user friendly!

Lush is a flexible content slider. It uses CSS3 native transition and animations to get the best performance taking advantage of the modern browser features, without lose functionality in older browsers.
It uses a semantic syntax to describe the animation timeline avoiding complex attributes and keywords.
The animation system is completely extensible allowing to add more animations and transitions easily just like adding new CSS classes.


RoyalSlider – Touch-Enabled jQuery Image Gallery – MORE INFO / DEMO

RoyalSlider is a repsonsive jQuery slider plugin with many slider types and tons of transition effects

RoyalSlider is easy to use jQuery image gallery and content slider plugin with animated captions, responsive layout and touch support for mobile devices. As navigation you can use thumbnails, tabs or bullets. Use it as image slider, slideshow, HTML content slider, gallery, banner rotator, video gallery, carousel or even presentation. Developed in best practises of HTML5, CSS3 transitions are used for all animations (with fallback).


Layer Slider (Must see parallax effects) – MORE INFO / DEMO

Layer Slider is a feature rich jQuery slider plugin with layer support, tons of effects and transitions

This is the slider that will make you turn your head! Layer Slider is one of the most feature packed jQuery content sliders on the market. First, it makes it easy to add amazing layered effects to your website and of course, you can use the popular parallax-effect. For transitions between slides, there are more than 170 effects to choose from and this will make your slides stand out! There are five presentation modes to make the slider fit into your web design such as full width, responsive etc.


Parallax Slider – Responsive jQuery Plugin – MORE INFO / DEMO

This is Parallax Slider, one of the best parallax effect jQuery sliders available at the moment.

Parallax Effect – Full Collection of Sliders comes in 4 versions: Classic, Perpetuum Mobile, Mouse Interaction and Ultra. Each of these 4 versions has 2 skins (bullets & thumbs) and can be used as Fixed Dimensions or as Full Width. Please see the features and check the live preview of this slider and convince yourself of its quality.


Full Width Slider 2.0 – MORE INFO / DEMO

Full Width Slider 2 is the perfect jQuery slider solution for full fidth website where a responsive slider is needed.

This is a jQuery image slider specifically optimized for full screen width and with support for responsive layouts. It is possible to add title, description and a link to the slides and this way make them lead visitors to pages on the websites.


All in one Slider jQuery Banner Rotator / Content Slider –MORE INFO / DEMO

All in one Slider jQuery Banner Rotator / Content Slider is a jQuery slider with all the features one can imagine for adding slider effects to a website. It supports many types of slider layouts and it is fully mobile ready

All In One is an Advanced Jquery Slider which comes in 5 flavors: Banner Rotator, Thumbnails Banner, Banner with Playlist, Content Slider, Carousel. It allows you to easily create powerful sliders with animated text using HTML standard tags, making the slider very easy to setup and maintain. Please see the features for each product and check the live preview of this slider and convince yourself of its quality.


Showbiz Pro Responsive Teaser jQuery Slider Plugin – MORE INFO / DEMO

This is the Showbiz Pro Responsive Teaser jQuery plugin to show off blog posts, products, images, videos etc.

Showbiz Pro is a highly customizable plugin to show you or your customer’s services, portfolio items, blog contents… basically all business information thinkable.What makes this item unique is that you can define everything(Captions, Preview, Details etc.) via CSS or HTML or jQuery plugin option which gives you Unlimited Layout Possibilites. Please check out the examples to see for example how a small preview view expands to a rich detailed panoramic view. All fits nicely in the designated area.


Page Animate Webpage Slider – MORE INFO / DEMO

One page web design is hot - with Page Animate Webpage Slider one get a slider solution that will be perfect for setting up a modern one page design
This jQuery plugin is a full page slider for navigating between web pages. For example, you could have your home page on one slide, contact page on another, and so on. It is responsive and works in all major browsers, including Internet Explorer 6 ( :o ) and mobile browsers.


Revolution Responsive Slider jQuery Plugin – MORE INFO / DEMO

Revolution Responsive Slider is one of the most popular premium jQuery slider plugins available and for a good reason. It is packed with cool slider features and it is easy to set up

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!


TouchCarousel – jQuery Content Scroller and Slider – MORE INFO / DEMO

The TouchCarousel jQuery slider and scroller is a lightweight solutions that partly support mobile screens. It is a good solution for showing related posts, product images etc.

TouchCarousel is mobile-friendly and lightweight jQuery content scroller with touch navigation for mobile and desktop. May be used as carousel, banner rotator and image gallery.
It’s used by top web design agencies, email newsletter companies and simple schools.


jQuery Banner Rotator – MORE INFO / DEMO

Cool transition effect is what makes jQuery Banner Rotator special. It is a classic image slider solution but with effects that makes us stop and watch!

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.


jQuery OneByOne Slider Plugin – MORE INFO / DEMO

OneByOne is a lightweight and responsive jQuery slider plugin for featuring import content

The OneByOne Slider is a lightweight, responsive & layered jQuery plugin you can use to display your image and text one by one. The CSS3 animation is driven by Animate.css. It’s mobile friendly, which support wipe left/right on your touch device like iPhone & iPad. You can drag and drop to navigate with your mouse too. The latest update add an extra example, which make Twitter Bootstrap Carousel support the one by one animation.


Translucent – Responsive Banner Rotator / Slider – MORE INFO | DEMO

Translucent is a cool responsive slider and banner rotator plugin with cool transparency effects

Translucent is a cool responsive slider and banner rotator plugin with cool transparency effects on captions / descriptions. There are six layout templates included making it a flexible solution and useful for most websites.

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.
8 example variations included with source package.
Around 55 plugin settings included for deeper customization.
The captions can be customized by both plugin settings as well as CSS .


Saloon – MORE INFO / DEMO

Sallon is a responsive jQuery banner rotator or slider plugin with powerful transition and animation effect

Saloon – The jQuery Banner Rotator animates your image and text slides with transition effects of the wide library. Easy installation, state-of-the-art 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.


CCSlider – jQuery 3d Slideshow Plugin – MORE INFO | DEMO

CCSlider is one of the jQuery slider plugins that have amazing 3D and 2D transition effects to really capture visitors attention

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 slider is fully responsive, works in mobile devices and supports touch gestures to navigate through the slides. 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.


Responsive KenBurner Slider jQuery Plugin – MORE INFO | DEMO

I am sure you have seen the popualr Ken Burner effect on modern websites. With Responsive KenBurner Slider you get a image slider solution with  cool image effects

Responsive KenBurner Slider jQuery Plugin is the premium way of using a slider in your website. A combination of Ken Burns Effect, state-of-the-art Slider, Text Animations and Responsive rebuilding defines this slider.


jQuery UniSlider – MORE INFO | DEMO

With the UniSlider image and content slider plugin you get a responsive slider that support draggable / touch events for mobile devices.

With the UniSlider plugin you get a responsive slider plugin that support draggable / touch events for mobile devices. The slider is great for both image and HTML content.


SlidesJS – MORE INFO | DEMO

Slides is a cool free jQuery slider plugin

SlidesJS is a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and CSS3 transitions. Give it a try above and check out the examples to help you get started adding SlidesJS to your project.


Simple Multi-Item Slider – MORE INFO / DEMO

ItemSlider is a cool alternative approach to a slider. Codrops also added a totorial to show how it is created.

ItemSlider is a cool alternative approach to a slider where individual content items fly in from the side. Codrops also added a totorial to show how it is created. The slider will be perfect for an e-commerce website to feature specific products.


Free Responsive jQuery Slider and Gallery Plugin – MORE INFO | DEMO

Being a free responsive jQuery gallery plugin this is a really cool script for websites that need a way to feature images

This is a free responsive jQuery gallery plugin and it is a great script for websites that need a way to feature images. It is a classic gallery slider with thumbnails below the slider but it is mobile friendly and it makes it stand out.


Galleria Responsive Slider – MORE INFO | DEMO

This is the Galleria Responsive Slider. It is a free script with some really cool image presentation features.

 

Galleria is a JavaScript image gallery framework that simplifies the process of creating beautiful image galleries for the web and mobile devices.


Blueberry – MORE INFO | DEMO

Blueberry slider is a mobile first and fully responsive jQuery image slider

Blueberry slider is a mobile first and fully responsive jQuery image slider


jQuery Sliders for non-responsive layouts


Estro – jQuery Ken Burner slider with swipe effect – MORE INFO | DEMO

Estro is a cool jQuery Ken Burner slider using clean markup and it is SEO friendly.

This jQuery plugin uses unobstrusive javascript to transform a block of simple HTML markup into a georgous elegant slider, which can be completely customized using HTML5 data attributes. The markup is valid HTML5 and SEO optimzied, with all content always being available to search engines. When using this plugin, your page layout will be consistent even if javascript has been disabled.


SlideDeck.js – MORE INFO

slidedeck.js is a very feature rich jQuery slider development solution. You can create various types of sliders with this framework.

SlideDeck.js 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.


Basic jQuery Slider – MORE INFO / DEMO

This is Basic jQuery slider is a simple and yes very basic implementation of a jQuery slider

Basic jQuery Slider has been developed to be as simple and lightweight as possible. Only the essential functionality has been included combined with clean semantic mark-up. This means instead of removing features and bending it to suit your needs, you can use this slider and as a base and with a little bit of CSS and JavaScript knowledge, you can extend it to be as feature rich, or as simple, as you need.


jQuery Slider Evolution – MORE INFO | DEMO

What you see here is the jQuery Slider Evolution. Help you to set up cool image slides with great transition effects.

Slider Evolution is a JQuery plugin that lets you easily create powerful javascript sliders with very nice transition effects. Enhance your website by adding a unique and attractive slider!


Paradigm Slider jQuery Plugin – MORE INFO | DEMO

Here you see the Paradigm Slider jQuery plugin that offer stunning effects such as parallax

The Paradigm Slider jQuery plugin have many cool animation effects for slider items and text. The slider support animated captions with shadow effects and thumbnails below the slider for easy navigation.


Factory Galleries Slider – MORE INFO / DEMO

This is the Factory Galleries jQuery slider solution with nice sliding effects for both images and text

This is the Factory Galleries jQuery slider solution with nice sliding effects for both images and text. It support multiple sliders per page.


Roundabout – MORE INFO | DEMO

Roundabout is a very interesting jQuery slider carousel plugin with great 3D effects and manu possible use cases.

Roundabout is a jQuery plugin that easily converts unordered lists & other nested HTML structures into entertaining, interactive, turntable-like areas.


jQuery Blinds Image Slideshow – MORE INFO / DEMO

The jQuery Blinds jQuery slider plugin is useful for creating basic image Slideshows on your web pages

The jQuery Blinds jQuery slider plugin is a lightweight and simple solution for creating basic image Slideshows on your web pages


Pikachoose – MORE INFO | DEMO

Pikachoose is a cool jQuery slider with gallery and lighbox build in.

Pikachoose is designed to be easily installed, easy to setup, compatible with any hosting provider and well… all around easy. Now there is even Premium themes available to make PikaChoose really stand out.


jQuery Tiny Slider – MORE INFO | DEMO

jQuery Tiny Slider 2 is a simple and quite lightweight jQuery slider plugin useful for creating inline slideshow of images and HTML.

jQuery Tiny Slider 2 is a simple and quite lightweight jQuery slider plugin useful for creating inline slideshow of images and HTML content such as headings, descriptions and buttons.


jQuery popeye 2.0 – MORE INFO / DEMO

jQuery popeye 2.0 is a unique slider solution that create a large preview of the image when clicked.

jQuery popeye 2.0 is a unique slider solution that create a large preview of the image when clicked. The plugin have a cool design with navigation inside the image area that becomes visible in mouse over.


BlogSlideShow – MORE INFO | DEMO

BlogSlideShow is a simple and useful jQuery slider gallery for making a great presentation of images with captions.

BlogSlideShow is a jQuery plugin enhancesing your blog pages with image viewer, which provides fancy transition effects.


Nivo Slider – MORE INFO | DEMO

The Nivo Slider is one of the most popular image slider plugins. It features cool transition effects and simple nativation

The Nivo Slider is one of the most popular image slider plugins. It features cool transition effects and simple nativation. Nivo Slider have keyboard shortcut support and you can add HTML captions.


Morphing Gallery – MORE INFO | DEMO

Morphing Gallery is not a traditional slider with a fixed size on the slider area. It change to fit the image dimensions.

Morphing Gallery is not a traditional slider with a fixed size on the slider area. It change to fit the image dimensions.


Agile jQuery Carousel – MORE INFO | DEMO

Agile jQuery Carousel comes in multiple flavours and it means it support different slider types.

Implement your slideshow with the Agile Carousel JQuery plugin. Highly customizable so you can build according to your requirements.


Carou Fredsel – MORE INFO | DEMO

CarouFredSel is a jQuery plugin you can use to tuen any kind of HTML element into a sliding carousel

jQuery.carouFredSel is a plugin that turns any kind of HTML element into a carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, infinite and circular, automatically or by user interaction. Oh, and it’s responsive too.


Smooth Scroll – MORE INFO / DEMO

Smooth Scroll is a simple jQuery slider plugin by Thomas Kahn. It scrolls content horizontally slowly either in left or right direction.

Smooth Scroll is a simple jQuery slider plugin by Thomas Kahn. It scrolls content horizontally slowly either in left or right direction.


s3Slider jQuery plugin – MORE INFO / DEMO

s3Slider jQuery plugin is simple solution for adding cool image effects to your website

The s3Slider jQuery plugin is slideshow that displays objects with layers that can be positioned anywhere over it.


Coin Slider – MORE INFO / DEMO

Coin Slider is not one of the most recent jQuery slider plugins but it is worth checking out.

Coin Slider is not one of the most recent jQuery slider plugins but it is worth checking out. It is simple and lightweight and have cool transition effects


Presentation Cycle – MORE INFO | DEMO

Presentation Cycle takes a different approach to slider navigation and it is worth checking the demo.

Cycle is a script that supports image presentations to easily display multiple images. This script supports a lot of effects and the cycling of html elements.


Annotation Overlay Effect with jQuery – MORE INFO | DEMO

annotation overlay effect with jquery

You can create a simple overlay effect to display annotations in e.g. portfolio items of a web designers portfolio using jQuery.


BxSlider – MORE INFO | DEMO

bxslider

BxSlider is a jQuery content slider and image slideshow that features horizontal, vertical, fade transitions and display and move multiple slides at once (carousel).


Lof JSliderNews – MORE INFO | DEMO

Lof JSlider is a cool jQuery slider plugin  to feature your best content for your your readers

Lof JSlider is a cool jQuery slider plugin to feature your best content for your your readers. It has a very smooth user interface that gives your image an added aesthetic appeal.


Cloud Carousel – MORE INFO | DEMO

Cloud Carousel is a classic carousel design with images moving round in a 3D like manner.

Cloud Carousel is a classic carousel design with images moving round in a 3D like manner. . This carousel features optional auto-reflections, and the information contained in the Alt and Title tags of the images can optionally be displayed as you hover over each image.


Minimalistic Slideshow Gallery with jQuery – MORE INFO | DEMO

Here you see the Minimalistic Slideshow Gallery jQuery plugin. There is also a tutorial available to show you how it is implemented.

Minimalistic Slideshow Gallery with jQuery is a beautiful slideshow gallery that can be easily integrated in your web site. It has a container with a slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will slide out from the top and allow the user to navigate through a set of thumbnails.


HisjSlide JS – MORE INFO / DEMO

With Highslide JS you get a simple JavaScript image gallery viewer

With Highslide JS you get a simple JavaScript image gallery viewer with image slide features.


jQuery Grid Style Slider – MORE INFO / DEMO

jQuery Grid Style Slider help you create grids of images that users can slide through

jQuery Grid Style Slider help you create grids of images that users can slide through. It is possible to customizable the number of columns and rows in the grid.


ImageFlow (JavaScript) – MORE INFO / DEMO

ImageFlow is a cool idea for how to showcase images.

ImageFlow is a cool idea for how to showcase images. it is a user friendly JavaScript image gallery.


Tips on choosing a jQuery slider plugin

  • Look for recent updates and support: While we try our best to keep this article up to date there is always a risk that plugins are suddenly not supported any more. The risk is highest with free plugins but developers of premium plugins can also drop the project.
  • It is often possible to find a good free slider script that is still updated and supported by the developer. Having said that it is more likely that a free slider plugin will be unsupported over time compared to premium plugins. If you are Ok with this and able to replace the script with another free plugin at that time I recommend you check this section first.
  • Be clear on requirements and choose the right slider type: 1) Standard Photo Slider: specifically designed for making it easy to highlight images in a great looking way. However pure image slider plugins will not accept HTML content, video etc. 2) Gallery Style Slider: This is a slider used to showcase multiple images and typically it includes thumbnail previews of the images. 3) Mixed Content Slider: This type of slider looks similar to image slider but also allows you to have HTML content, video, text layers etc. 4) Carousel slider: Again this slider design is similar to image sliders, but this slider type have more than one image visible at the same time and often the transition effect simulates a moving carousel.
  • Lightweight or do it all: Everything added to a web pages takes time to load. The more features a plugin have build in the more heavy it is likely to be. Check the script size if performance is a really critical factor
  • Further consider your needs for text overlay (captions) – how flexible should it be to cover future needs?
  • What data sources will be needed – just images on a disk or automatic data pull from feeds and popular content services?
  • What web clients to support? If your site is responsive or if you have a dedicated mobile site you may want a responsive slider. And further a slider that have build in support for tough interactions.
  • Controls… both related to users and what you need to configure as default actions. This could be everything from auto-play, delay between slides, look and feel / graphics used for controls etc.
  • Consider what animations and transitions you need (the x-factor): Recently sliders have been equipped with awesome layered parallax effects making elements fly in from all sides. However this takes extra effort to setup and may be too fancy. Another popular animation is the Ken Burnes zooming effect.
  • For performances and usability considerations it is a good idea to look for sliders that use HTML5 canvas and CSS3 animations as default. It is important that the slider fall back nicely to jQuery effects on older browsers.