A jQuery slider is a very useful way to feature important content. By using jQuery slider plugins, we can create amazing 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 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.
The jQuery library has undoubtedly made the life of web developers easier and made it possible for non-experts to do fancy stuff themselves. With jQuery, we can do a lot of really advanced and dynamic things by writing just few lines of codes and without having to add Flash.
Because jQuery effects work wonders in our designs, it makes sense that we take steps to acquire a size-able collection of ready to use plugins in various categories. To make things easy for you, we are showcasing a substantial array of awesome jQuery slider effects. We hope this can save you time in finding the right solution for your projects. Take a look at the round-up of jQuery Slider Plugins below!
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.
Advertisement
Tips on choosing a jQuery Slider plugin
Before you decide on a specific slider script theres a few tips and considerations I would like to share with you.
- 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.
- Be clear on requirements and choose the right slider type: Some sliders are specifically designed for making it easy to feature images in a great looking way. However pure image slider plugins will not accept HTML content, video etc.
- 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.
Now to the jQuery sliders
1. Layer Slider (Must see effects)
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)
2. SlideDeck
With SlideDeck, you can organize any type of web content into a beautiful and user-friendly slider. Recently a WordPress version of this popular slider was made available, called SlideDeck2 and it is worth checking out for sure!
MORE INFO / DEMO – by Digital Telepathy (premium plugin)
3. 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.
MORE INFO | DEMO – by Wow Slider (Free Plugin)
4. 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.
MORE INFO | DEMO – by CodeCanyon (Premium Plugin)
5. Estro – jQuery Ken Burns & swipe effect slider
This jQuery plugin uses unobtrusive JavaScript to transform a block of simple HTML markup into a gorgeous 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.
MORE INFO | DEMO – by CodeCanyon (Premium Plugin)
6. Responsive KenBurner Slider jQuery Plugin
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. Customize this slider with just a little HTML and CSS to your very needs. Give each slider some captions to transport your message. Use your Ken Burns Animated banner elements with the possibility of playing YouTube and Vimeo clips in a special detail view with describing text.
MORE INFO | DEMO – by CodeCanyon (Premium Plugin)
7. HisjSlide JS
Highslide JS is an image, media and gallery viewer written in JavaScript.
MORE INFO / DEMO (free jQuery plugin)
8. jQuery OneByOne Slider Plugin
The OneByOne Slider is a lightweight 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.
MORE INFO |DEMO by Codecanyon (premium plugin)
9. 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)
10. Supersized jQuery plugin
Supersized jQuery plugin is a full screen background and slideshow that you can use to satisfy the craving of your clients for big and wonderful pictures.
MORE INFO | DEMO – by Build Internet (Free Plugin)
11. 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)
12. Sliding Boxes and Captions
The animation of the sliding element of this plugin either show or cover up the viewing area, thus creating the sliding effect.
MORE INFO | DEMO – by Build Internet (Free Plugin)
13. jQuery Banner Rotator
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.
MORE INFO / DEMO – by CodeCanyon (premium plugin)
14. 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)
15. 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)
16. 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)
Step Carousel Viewer
Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps.
MORE INFO | DEMO – by dynamic drive (Free Plugin)
17. Revealing Photo Slider
This slider has thumbnail photo gallery, where clicking a button would reveal the entire photo and more information about that photo.
MORE INFO / DEMO (free jQuery plugin)
18. jQuery Grid Style Slider
This is a jQuery grid slider with support for multiple categories, expandable html content, and lightbox. The slider is fully configurable and resizable through the plugin’s parameters and stylesheet.
MORE INFO / DEMO – by CodeCanyon (Premium Plugin)
19. Nivo Slider
Nivo slider is an awesome jQuery slider that features smooth transition, keyboard navigation and html captions.
MORE INFO | DEMO – by Nivo (Free Plugin)
20. HTML5 JQUERY SLIDER
This effect creates progressively enhanced slideshow with a fancy transitioning effect.
MORE INFO / DEMO (free jQuery plugin)
21. li JQuery Slider/Image Rotator
li jQuery Image Slider / Banner Image Rotator is carefully crafted slider/image rotator, full of features, very easy to install and customize. Whenever you need a full featured slider image rotator or you need a simple ad banner, li jQuery Image slider will do the job with ease!
MORE INFO | DEMO – by CodeCanyon (Premium Plugin)
22. DualSlider
With DualSlider, you can slide your images while leaving a space for the description and other details.
MORE INFO / DEMO (free jQuery plugin)
23. DDSlider – 10 Transitions – Inline Content Support
DDSlider introduces a new easy-to-go slider with 9 different unique transitions (+fading & random—11 total) that support Inline Content. You can also have multiple sliders in the same page
MORE INFO | DEMO – by CodeCanyon (Premium Plugin)
24. 3D Rotation Viewer
This cool stuff easily creates a 3D rotation viewer in UIZE that lets users rotate the view of an object a full 360 degrees using a mouse, or finger on the Apple iPad.
MORE INFO / DEMO (free jQuery plugin)
25. ImageFlow
ImageFlow is an unobtrusive and userfriendly JavaScript image gallery.
MORE INFO / DEMO (Free Plugin)
26. Sideways – Fullscreen Gallery
Sideways is a simple, yet elegant fullscreen image gallery created with the jQuery framework and some simple CSS.
MORE INFO / DEMO (free jQuery plugin)
27. 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)
28. Magic Scroller
Scroll your elements with this nice effect which is easy to install. With magic scroller, you can scroll your display vertically to expose its elements, iframes, or imáges. As a precondition all the elements have to be of equal size, and the mask needs to be proportional to the elements per row.
MORE INFO | DEMO (Free Plugin)
29. Slides
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.
MORE INFO | DEMO – by SlidesJS (Free Plugin)
30. 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)
31. jQuery Slider Evolution
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! Create an unlimited number of sliders with customized settings for each one, and place them anywhere on your website with ease.
MORE INFO | DEMO – by CodeCanyon (Premium Plugin)
32. jQuery Drag Expose | Draggable Image Gallery
Show your photos in a different way – Let the user drag & drop them to slide the gallery!
MORE INFO |DEMO by Codecanyon (premium plugin)
33. Roundabout
Roundabout is a jQuery plugin that easily converts unordered lists & other nested HTML structures into entertaining, interactive, turntable-like areas.
MORE INFO | DEMO – by Fred HQ (Free Plugin)
34. Anything Slider
AnythingSlider brings together the functionality of all previous sliders and their features.
MORE INFO | DEMO – by CSS-Tricks (Free Plugin)
35. Showbiz Business Carousel jQuery Plugin
This is a highly customizable plugin to show you or your customer’s services, portfolio items, blog contents. Basically all business information thinkable.
MORE INFO | DEMO – by CodeCanyon (Premium Plugin)
36. Carou Fredsel
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. The carouFredSel-plugin was built using the jQuery-library.
MORE INFO | DEMO – by CarouFredsel (Free Plugin)
37. 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)
38. BBC Radio 1 Zoom Tabs
This jQuery effect that can be used as a gallery to where pictures can be presented in a nice slide that automatically changes pictures the moment a mouse is on top of a navigation button.
MORE INFO | DEMO (Free Plugin)
39. HTML5 Slideshow w/ Canvas & jQuery
This effect creates progressively enhanced slideshow with a fancy transitioning effect.
MORE INFO | DEMO – by Tutorialzine (Free Plugin)
40. Contextual Slideout Tips With jQuery & CSS3
This effect is an easily configurable set of contextual slideouts. Each can be opened in one of four directions – bottom-right (default), bottom-left, top-left and top-right, and each can be in one of three colors – green (default), blue, and red.
MORE INFO | DEMO (Free Plugin)
41. jQuery Timeline Slider
Timeline Slider is the definitive plugin to build your history timelines. Its main configuration can be
easily customized due to its compact config parameters, directly from the html file. Also more configurations can be edited through the css style sheet file. It comes with 2 skins, Dark, Light, to make easy the integration on your web project. The powerful jQuery library makes this component cross-platform.
MORE INFO | DEMO – by CodeCanyon (Premium Plugin)
42. Gallery Using z-index and jQuery
You can create an effect where pictures are animated to look like they were discarded one after the other by clicking. This is made using z-index and jQuery.
MORE INFO | DEMO (Free Plugin)
43. Background Image Navigation with jQuery
This is a beautiful navigation that has a background image slide effect. It has three list items that contain the same background image but with a different position. The background image for each item is animated to slide into place in different times, creating a really nice effect.
MORE INFO | DEMO (Free Plugin)
44. Morphing Gallery
A gallery that “morphs” images between transitions.
MORE INFO | DEMO (Free Plugin)
45. Agile jQuery Carousel
Highly customizable jQuery Carousel plugin 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. This is an all new version written from scratch. JQuery UI effects and the ability to read files on the server are no longer included. New features are added, such as “Control Sets” which allow for a more customizable setup.
MORE INFO | DEMO – by Agile Carousel (Free Plugin)
46. Presentation Cycle
Presentation Cycle is a variation on the functionality of Cycle. Instead of generating a list of numbers that are clickable Presentation Cycle generates a progress bar that shows when the new slide will appear.
MORE INFO | DEMO – by Gaya Design (Free Plugin)
47. iTunes-like Slider
A simple slider/slideshow which mostly emulates the one on iTunes barring few changes.
MORE INFO | DEMO (Free Plugin)
48. iCarousel
iCarousel is an open source (free) javascript tool for creating carousel like widgets.
MORE INFO | DEMO (Free Plugin)
49. Minimalistic Slideshow Gallery with jQuery
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.
MORE INFO | DEMO (Free Plugin)
50. Related Posts Slide Out Boxes with jQuery and CSS3
This awesome effect works like a little widget that can be used to show related posts in any page. It shows a fixed list at the right side of the screen with some thumbnails sticking out. When the user hovers over the items, they slide out, revealing the title and two links, one for the related article itself and one for the demo.
MORE INFO | DEMO (Free Plugin)
51. Compact News Previewer with jQuery
This acts as a news previewer that lets you show your latest articles or news in a compact way. The news previewer will show a 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 is clicked, the preview will slide in.
MORE INFO | DEMO (Free Plugin)
52. 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.
MORE INFO | DEMO (Free Plugin)
53. 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).
MORE INFO | DEMO (Free Plugin)
54. Lof JSliderNews
Use this stunning slider to entertain your readers while scrolling what feature your website has. It has a very smooth user interface that gives your image an added aesthetic appeal.
MORE INFO | DEMO (Free Plugin)
55. Slick Auto-Playing Featured Content Slider
Slick Auto-Playing Featured Content jQuery slider has is a main content area, which slides from left to right each with different unique content.
MORE INFO / DEMO (free jQuery plugin)
56. Cloud Carousel
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.
MORE INFO | DEMO – by Professor Cloud (Free Plugin)
57. jQuery UniSlider
The jQuery UniSlider plugin adds an elegant and sleek slider feature to your pages, You can use it as an images slideshow, or put any html content to slide. There are many features, options, events and methods included, easy to customize and implement.
MORE INFO | DEMO – by CodeCanyon (Premium Plugin)
58. TouchCarousel – jQuery Content Scroller and Slider
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.
MORE INFO | DEMO – by CodeCanyon (Premium Plugin)
59. BlogSlideShow
BlogslideShow is a free open code JQuery plugin that enhances your blog pages with fancy image viewer, which provides nice transition effects including CSS3/HTML5-related ones.
MORE INFO | DEMO (Free Plugin)
60. jQuery Tiny Slider
jQuery Tiny Slider is a small and lightweight jQuery-plugin to create simple inline slideshow.
MORE INFO | DEMO (Free Plugin)
61. Paradigm Slider jQuery Plugin
Paradigm Slider jQuery Touchable Plugin uses a combination of Parallax Effect, state-of-the-art Slider and Text Animations. You can customize this slider with just a little HTML and CSS to your very needs. You can also give each slider a parallax caption to transport your message. Touch swipe for iOS and Android mobile devices is of course included. So it works on every modern browser (including IE7 /8) and on mobile devices.
MORE INFO | DEMO – by CodeCanyon (Premium Plugin
62. Smooth Div Scroll
Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right. Apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scrolling to distinct steps. As the name of the plugin hints, scrolling is smooth. There are no visible buttons or links since the scrolling is done using hotspots within the scrollable area or via autoscrolling.
MORE INFO / DEMO (free jQuery plugin)
63. s3Slider jQuery plugin
The s3Slider jQuery plugin is slideshow that displays objects with layers that can be positioned anywhere over it.
MORE INFO / DEMO (free jQuery plugin)
64. Ruby – jQuery Ken Burns Feature List Slider
Ruby is highly customizable and powerful image slider carefully crafted to enrich website and target wide spectrum of applications. It supports images with any size, html content and videos hosted on youtube and vimeo. Built in kenburns effect for images and flexible transition engine delivers sophisticated and eye catching animations and effects for slider content. Built in video support allows for easy youtube and vimeo clips embedding.
MORE INFO | DEMO – by CodeCanyon (Premium Plugin)
65. jQuery Slideshow using CSS Sprites
This cool slideshow has a very smooth animated transition and customizable animation orchestration that works great in all popular browsers.
MORE INFO / DEMO (free jQuery plugin)
66. jqGalScroll
jQuery Gallery Scroller (jqGalScroll) takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally. The plugin will also create pagination to allow you to flow through your photos.
MORE INFO / DEMO (free jQuery plugin)
67. jQuery popeye 2.0
This popeye-box uses the standard options: it floats to the left and opens to the right, its navigation and caption show on mouseover. By placing the navigation inside the stage area (where the image is displayed), we can get it to hover above the image.
MORE INFO / DEMO (free jQuery plugin)
68. jQuery Simple Slider Plugin
The Simple Slider is a jQuery plugin you can use to display your image and Vimeo or Youtube videos. The CSS3 animation is driven by Animate.css. It’s mobile friendly, which support wipe left/right on your touch device.
MORE INFO | DEMO – by CodeCanyon (Premium Plugin)
69. jQuery Cycle Plugin
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)
70. jQuery Image Scroller
This scroller is different from others because it is completely autonomous and will begin scrolling once the page loads.
MORE INFO / DEMO (free jQuery plugin)
71. Coin Slider
This jQuery slider features smooth transition effects and is compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+
MORE INFO / DEMO (free jQuery plugin)
72. Avia Slider
This 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)
73. Cross Slide
CrossSlide is a jQuery slider plugin implementing in 2kB of Javascript code some common slide-show animations, traditionally only available via Adobe Flash or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself.
MORE INFO / DEMO (free jQuery plugin)
74. Polaroid Photo Viewer
You can see your images as if it were stacked one on top of the other with this glamorous effect.
MORE INFO / DEMO (free jQuery plugin)