We have received lots of comments and mails for the earlier post of jQuery slider and many people asked for more examples and plugins.
Waiting is over here is a selection with 190 + of the best jQuery slider plugins and tutorials with a lot of different features, we're pretty sure you'll find exactly what you have been looking for a while now, so please, go ahead and enjoy.
jQuery is such an amazing tool that delivers what offers: writing less and doing more, that’s why now we’d like to share with all of you this huge list where you can find all kind of plugins and tutorials for showcasing content in a slider, which can be images, photographs, videos, text, anything you’d like to put in it, with a lot of cool effects and animation.
Although the tutorials are really clear and well explained, the websites also offers you feedback and support, so you’ll have no problem with installing it.
If you find some kind of problem or a bug, they're really looking forward to your opinion, most of these websites keep updating their plugins.
You may also like the following jQuery Sliders articles:
- 190+ Best jQuery Slider Plugins & Tools – Part II
- 190+ Best jQuery Slider Plugins & Tools – Part III
- 190+ Best jQuery Slider Plugins & Tools – Part IV
- 30 Awesome jQuery Slider – Gallery Plugins and Tutorials
- Portfolio Zoom Slider with jQuery
- Best jQuery Plugins for Web Development
Table of Contents
Coin Slider is a really amazing plugin, with unique transition effects. It has a flexible configuration, auto slide, navigation box, it links images and is free to use under the MIT license.
It's fully customizable using CSS and compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+ even Android and iPhone.
Automatically generates sliding boxes and captions. It was first uploaded in 2010 and the last update was on March 16, 2011.
Among its multiples features includes allowing slide & fade animations with custom directions and pre-loaded images within boxes. The implementation is fairly easy, it operates with two panels – an overlay and a backdrop. The content in the overlay gets repositioned according to the options that you provide.
This awesome slider with a chopping effect was last updated on Feb 22, 2016. The ChopSlider uses the full power of CSS3 animation, has its own CSS3 support detection, and even old or Internet Explorer support it, a little bit different but still awesome. It will be free under the MIT license, once released. The creator still running some tests.
This plugin uses jQuery and CSS, with this tutorial you’ll be able to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. It requires jQuery and some CSS3 properties for the style. The thumbnails container will scroll automatically when the user moves the mouse to the left or right.
Thanks to this tutorial you’ll be able to create an expanding image menu with jQuery. The idea is have some columns with black and white image slices that will make a content area slide out when click on them. And by also sliding in the colored version of the image you’ll get a neat effect. You don’t have to worry because this plugin is available with MIT license, free for all.
Creating an image gallery with a Polaroid look is amazingly easy. With albums that will expand to sets of slightly rotated thumbnails that pop out on hover. The full image will slide in from the bottom once a thumbnail is clicked. In the full image view the user can navigate through the pictures or simply choose another thumbnail to be displayed. This is available for free with the MIT license.
This plugin last update was in November 30, 2010, the idea is to have a set of rotated thumbnails that once clicked, animate to form the selected image. You can navigate through the images with previous and next buttons and when the big image gets clicked it will scatter into the little box shaped thumbnails again. Pretty cool uh?
This plugin is perfect for giving the sensation of seeing and swap photographs digitally as we do it without own hands, creates a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, that album images are shown as a beautiful photo stack. In the photo stack view, we can browse through the images by putting the topmost image behind all the stack with a slick animation.
Create a stunning full page gallery with scrollable thumbnails and a scrollable full-screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse. When a thumbnail is clicked, it moves to the center of the page and the full-screen image is loaded in the background. Now the user can move up and down and the image will get scrolled automatically, giving him the opportunity to see all of the images.
This plugin will allow you to create a website template with some really sweet animations using jQuery. The purpose is having little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area. This uses some different animation effects that will be added as options to the menu item.
With TN3 Gallery you can easily create amazing photo galleries and slideshows with slick transition effects, as well as multiple albums, CSS skinning, XML, and Flickr support with a host of additional features. No browser plugins required. You can download the free lite branded version for the basic functionality, or the unbranded professional version for extended features.
This plugin will help you to create a fullscreen gallery with jQuery, the goal is having a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images. The big image will slide up or down depending where you're navigating. It includes the addition of navigation control for the mouse wheel and keys. The thumbnail will have a zoom and a fullscreen option, making the image in the background appear in fullscreen mode or as a complete image resized to fit on the page.
With this tutorial you’ll create an image gallery with jQuery that shows a preview of each image as a little thumbnail, the main purpose is to hover over the slider dots and make the regarding thumbnail slide into the previewer. When clicking a slider dot, the full image will slide in from the right or left side, depending on the currently viewed image.
uBillboard is suitable for all WordPress users, those new to WordPress will find it easy to set up and use, while WordPress veterans and theme developers will find it easy to extend or use in their own themes. uBillboard is simply for everyone! Among the main features you’ll find: sleek slider front end and admin, 18 transition effects + Random, transition effects based on scaling, square and column animation, fading, and many more, if you’re interested, give it a try!
This great plugin can be yours for $10, in exchange, you’ll get online content support, 11 different unique transitions, support to all major browsers including IE6, autoplay, it supports arrows and selectors, allows you to choose arrows and selectors simply, set the number of bars and squares, define specific transition for sliders, auto-pause when the user hovers the slider and many others feature for you.
This slider is as sexy as its name. Its features are Auto slide, continuous sliding, image captions, flexible configuration, 6 Transitions effects and more!
The advanced slider is a jQuery plugin that allows you to easily create powerfull sliders using either XML, thus making the slider much easier to set up and maintain or using HTML markup. The plugin also provides an easy to use API which will allow you to further enhance the functionality of the slider and make it possible to integrate it into your own application. Please take a look at the list of features below.
jsCarousel is a jQuery slider plugin that slides contents in multi-direction and can be used as a feature content slider as well. You can put any kind of content you want whether images, text, videos, news, etc. it’s up to you.
One interesting thing about the jsCarousel slider is that you can make a simple image gallery with thumbnail support by using it. The jsCarousel slider plugin gives you the source of an image via the callback function when you click on some image within the slider. It was last updated on April 12, 2011.
The most strong and popular web design trend over the last couple of years is sliding horizontal panels also known as Sliders or Carousels.
It’s a very effective method to increase web site usability and engage the user. The WOW Slider was updated on April 11, 2011, this is a jQuery image slider with stunning visual effects (Blast, Fly, Blinds, Squares, Slices, Basic, Fade, Ken Burns) and tons of professionally made templates. Is free for non-commercial use, a license fee is required for business use.
This is an advanced version of pirobox, one of the most important implementations is the ability to open any kind of files, from inLine content to the SWF files, from simple images to pdf files. Other things are automatic image resizing and drag and drop. The PiroBox browser compatibility includes Firefox 2+, Opera9.5+, Chrome, Safari (Mac/Windows),IE 7+.
PrettyPhoto is a jQuery lightbox clone. Not only does it support images, but it also supports videos, flash, YouTube, iframes, and ajax. It’s a full-blown media lightbox. It is very easy to set up, yet very flexible if you want to customize it a bit.
Plus the script is compatible in every major browser, even IE6. It also comes with useful APIs so prettyPhoto can be launched from nearly anywhere (yes, that includes Flash)! Was developed by Stéphane Caron. PrettyPhoto is totally free to use, it is licensed under Creative Commons Attribution 2.5. So you can use it in all your projects even commercial ones.
The plugin called Aga, short for Accordion Gallery is, as its name implies, an accordion plugin which can be used horizontally and vertically. It has a variety of options that make it possible to optimally adapt the plugin to its own requirements. The website is in German, so don’t freak out, just give the translator an opportunity.
One of the most requested improvements over the tutorials presented on this site is the ability to have the slides advance automatically. It is actually not that difficult to achieve this effect and to demonstrate it, in this short tutorial they give you their HTML5 Slideshow auto advance with a few lines of jQuery. So, this might be just what you’ve been breaking your head on lately.
Step away from common, boring & flat 2D experience and dive into endless possibilities of adding the third dimension to your slideshow. Subtle and sophisticated settings can tremendously improve general look & feel of your slideshow by adding this special 3D touch. You will love it and your visitors will love it even more.
This tasty looking jQuery plugin is not just delicious, it’s also lightweight, flexible, and customizable. It was released under MIT license and is compatible with Firefox 2 +, IE 6 +, Safari v4, Google Chrome 3 + and Opera 9 +, now you have no excuses!
This is a complete plugin kit done by Alan Frog, it was updated on May 18, 2011. This kit includes a content slider with modular elements, multiple navigation controls such as buttons, mouse wheel, image click, vertical/Horizontal navigation clip, Fading and sliding transitions effects, and more!. The Slider Kit generates a minimum of inline CSS. The whole skin is CSS-made, and it’s all for you.
This amazing plugin called Orbit was updated on March 17, 2011, among other improvements you’ll find that now you can highlight the text, fixed issue of false parameters failing, now you can have just 1 slide without it failing and other. The download includes jQuery 1.5.1 and all this is available under the MIT license.
This script is licensed under Creative Commons Attribution 2.5. So you can use it in all your projects even commercial ones. The s3Slider developer is really interested in helping anyone who has a doubt with this and offers support on his website, so, don’t be shy ad give it a try.
The Awkward showcase jQuery plugin allows you to add tooltips, enable thumbnails, activate dynamic height, and lots more.
It was last updated on April 27, 2011. This is called a Content Slider, but it can do more than just slide the content. Since version 1.0 it’s integrated with our Viewline Plugin enabling new innovative ways for displaying content on your website and it’s compatible with all the major browsers for both Win & Mac.
Position tooltips based on x- and y-coordinates, enable thumbnails, both horizontal and vertical, different view modes integrated with Viewline, this showcase is easy to implement and very easy to customize in CSS.
Do you guys know what’s great? the DMXzone people have modified the Nivo Slider. Now it allows you to present your images in a fantastic slider with the choice of 16 unique transition effects. Supplied with many awesome CSS skins and great-looking navigation control, can be customized through the CSS to fit any website design perfectly. Also supports linking images, keyboard Navigation, HTML captions, and the best part of it: it’s free to use and abuse under the MIT license.
This plugin gives you really easy to follow instructions. The package is based around the way you already build your website, so you don’t have to retain swaths of arbitrary knowledge to use it on a regular basis. This plugin won’t bog down your site or burn out your users’ browsers, even using it in multiple interactions per page.
It’s flexible, so you can put whatever data you want within the slide window, even mixed types, a proportionally-correct status display that configures itself, fullscreen display, and swipe functionality. Do you need anything more?
This jQuery plugin gives the user the option to view details of a portfolio item by zooming it on hover and to allow a full view by clicking. With this tutorial, you’re going to create some nice effects for a portfolio or similar website with jQuery and create a tiny slider to integrate it with the amazing Cloud Zoom plugin and the elegant Fancybox plugin.
The idea is to give the user the option to view details of a portfolio item by zooming it on hover and to allow a full view by clicking.
This plugin has an amazing feature, allows you to adjust a 3D view in the image gallery, unfortunately, it only works on safari. It was last updated on February 2, 2011. However, you can use it, in any other browser will show a pain image gallery, but won’t show any kind of error or such.
This tutorial is about creating a creative gallery with a slider for the thumbnails. The idea is to have an expanding thumbnails area that opens once an album is chosen. The thumbnails will scroll to the end and move back to the first image. The user can scroll through the thumbnails by using the slider controls. When a thumbnail is clicked, it moves to the center and the full image preview opens.
The idea is to scatter some thumbnails with different sizes on the page and make a ribbon slide in when we click on the picture. The ribbon will show some description next to the picture and when clicking again on the thumbnail, the ribbon will close and open again with a large version of the image.
This is the amazing Nivo Slider it includes 16 unique transition effects, simply clean and valid markup, loads of setting to tweak, was built in directional and control navigation, only weighs 15 kb, supports linking images, keyboard navigation and HTML captions. Don’t worry about compatibility, it supports IE v.7, Firefox v.3+, Chrome v.4+, Safari v.4+, and Opera v.10+. Available under MIT License.
This plugin will allow you to create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. They will also add an autoplay option and the mouse wheel functionality. Honestly, the effect is quite interesting, and just one click away.
With a vibrant image slider tutorial, you will make use of the parallax principle to move different backgrounds when we slide to an image in order to create some nice perspective. This will give a great depth to the whole slider when it’s in motion. Simply, to see this plugin in action is amazing, nevertheless, the beautiful photographs.
For using this plugin, you must own a Flickr account. The aim was to build a bottom photo bar that one can easily integrate into a website. It is hidden initially and slides up when the handle is clicked. First, the photo sets are shown and when one of them is chosen, all its images can be viewed as thumbnails. When a thumbnail is clicked, a full image view appears as an overlay.
This jQuery plugin lets you show a full-page image gallery with a nice thumbnail area that scrolls automatically when moving the mouse. The idea is to allow the user to slightly zoom into the picture by clicking on it. The thumbnails bar slides down and the image resizes according to the screen size.
This gorgeous jQuery script is Free for all use, even commercial with no permission required. It was last updated on November 20, 2010. It’s a really easy to install and customize besides, the effect you're; get is quite amazing, why don’t you give it a try?
This is how the Pikachoose developer explains his scrip “This is an easier option for those who think galleria might be too complicated, or Nivo doesn’t fully do what they wanted” Pikachoose was last updated on May 19, 2011, get it while still hot!
So, what exactly does Supersized do? Resizes images to fill browser while maintaining image dimension ratio Cycles Images/backgrounds via slideshow with transitions and preloading Navigation controls with keyboard support Integration with Flickr – pull photos by the user, set, or group. The current version is 3.1.3, was released on March 3rd, 2011, and is completely available for you under both MIT/GPL license.
You can get the latest version, which is 1.1.7, and was updated on May 2nd, 2011. Slides are licensed under the Apache license, and the programmer keep posting updates in his twitter account for you to follow if you’re interested in getting in touch.
With the rise of the jQuery library and its numerous plugins, there is an abundance of ready-made solutions that address this problem. However, to make a lasting impression to your visitors you need to present them with something they have not seen before and you’ll be able to make a jQuery & CSS mosaic gallery. It’s called Mosaic because it will feature an interesting tile transition effect when moving from one slide to another.
With his attempt of creating a content slider, the developer was aiming to create an easy-to-implement content slider plugin allowed for multiple instances on the same page, which also allows users to customize the size, button images, etc. It’s really nice looking, simple, clean.
Very Soon We will post the remaining part of the article.