Showcasing images, contents for business, portfolio, e-commerce or any other type of site can be achieved with jQuery carousel plugins. jQuery carousel plugins allow developers to display contents, videos, and images horizontally or vertically to make websites visually creative and beautiful.
In this article we have collected 20 Free Responsive jQuery Carousel Slider Plugins that would help you to organize and display your images, contents on your websites and make them responsive so that they can viewable on mobile devices as well. Following jQuery carousel plugins are absolutely free, responsive and each of them comes with different features, functionality and several options for customization. Enjoy !!
1. Slick
Slick is fully responsive jquery carousel plugins, it provides numerous features such as desktop mouse dragging, infinite looping, fully accessible with arrow key navigation, separate setting per breakout and many more.
2. Tiny CircleSlider
Tiny Circleslider is a circular slider / carousel. That was built to provide web developers with a cool but subtle alternative to all those standard carousels. Tiny Circleslider can blend in on any wepage. It was built using the javascript jQuery library. It supports iPhone, iPad and Android as well. A interval can be set to slide automaticaly every given milliseconds. You can fire a callback after every move. It is easy customizable and lightweight with only 130 lines of code. The mimified size is only 4 KB.
3. anoSlide
![Image slider jquery Image slider jquery](https://0.s3.envato.com/files/34013884/preview.jpg)
anoSlide is ultra lightweight responsive jQuery carousel plugin. It’s suitable for implementing a carousel for both desktop and mobile viewports. It has responsive, lightweight, built on top of jquery, lazy load for images and many other features included.
3D Rotating Carousel Plugin with jQuery and CSS3 - Circular Carousel 77908 views - Full-Width Responsive jQuery Slider / Banner Rotator Plugin 64476 views - Responsive jQuery Full Width Image Slider Plugin - responsiveSlides 62989 views. JQuery Carousel Examples. Horizontal jQuery Image Scroller with Video. JQuery Carousel with Images and YouTube Videos. JQuery Auto Scroller Carousel. Vertical jQuery Image Carousel with Text. JQuery Carousel with Notebook Background. JQuery Slider| jQuery Carousel| jQuery HTML5 Audio Player.
4. Owl Carousel
Owl Carousel is a jQuery plugin that allows us to create responsive carousel sliders so quickly. The plugin is touch-friendly and capable of featuring any HTML content with almost any markup. It has options for setting the pagination/sliding speed, enabling/disabling auto-play, showing bullet navigation and more. Also, it is possible to define the number of items to be shown on desktop, tablet + mobile separately and Owl Carousel will handle that automatically.
5. Blueimp Gallery
blueimp Gallery is a touch-enabled, responsive and customizable image & video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. It features swipe, mouse and keyboard navigation, transition effects, slideshow functionality, fullscreen support and on-demand content loading and can be extended to display additional content types.
6. Flxisel
Flexisel is a responsive image carousel jQuery plugin that adapts to screen size to create a great user experience showcasing content on all devices. It will change the number of items shown depending on the viewport width. All you have to do is call flexisel on your unordered list containing images.
7. jQuery RS Carousel
jQuery RS Carousel is a responsive and unobtrusive carousel written on top of jQuery and the jQuery UI Widget Factory providing a full and familiar API in less than 2.6kB minified and gzipped.
8. Elastislide
Elastislide is a responsive jQuery image carousel that will adapt its size and behavior in order to work on any screen size. Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid. It uses the jQuery Touchwipe plugin to obtain the wipe event on mobile.
9. Flexslider 2
This is a fully responsive jQuery slider plugin. It has a simple and semantic markup, supported in all major browsers, comes with various slide and fade animations, multiple slider support, callback API and hardware accelerated touch swipe support.
10. Wow Slider
WOW Slider is a responsive jQuery image slider with amazing visual effects (Collage,Photo, Domino, Page, Rotate, Blur, Flip, Blast, Fly, Blinds, Squares, Slices, Basic, Fade,Ken Burns, Stack, Stack vertical, Basic linear, Book, Cube and Seven) 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.
11. Bootstrap Carousel
A responsive bootstrap carousel slider that can be used for all your upcoming and current projects.
12. CarouFredSel
carouFredSel is a jQuery plugin that converts any kind of HTML element into an infinite and circular carousel. It can scroll one or more items at the same time both horizontally or vertically. Every item can be displayed automatically and/or by user interaction (pressing buttons or keys on the keyboard).
13. Killer Carousel
It is Powerful, responsive, touch-enabled carousel for modern websites and devices, plus legacy browser support. Killer Carousel meets the needs of professional developers who need a responsive, touch-enabled, versatile and visually impressive carousel. It uses the power of the latest browsers, but retains legacy support for the old ones too.
14. Bxslider
Responsive jQuery content slider.
15. jQuery Liquid Carousel Plugin
![Jquery 3d carousel slider responsive Jquery 3d carousel slider responsive](/uploads/1/2/6/0/126059631/373455270.jpg)
Liquid carousel is a jQuery plugin intended for liquid designs. Every time the container of the carousel gets resized, the number of items in the list change to fit the new width.
16. Amazing Carousel
Amazing Carousel is an easy-to-use Windows & Mac app that enables you to create circular, responsive jQuery Carousel and jQuery Image Scroller. The carousel can also be published as WordPress Carousel Plugin, Joomla Carousel Module and Drupal Carousel Module.
17. jCarousel
jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. It provides a full-featured and flexible toolset for navigating any HTML based content in a carousel-like fashion.
18. Moodular
Moodular is a jQuery plugin which allows to create carousel/slider very easily. The plugin supports external function calls, easing, changing movement speed/direction, and even has a ‘carousel’ option, hence the carousel in the title. Images can be rounded, and you can switch between zooming and fading images.
19. Rondell
This is a jQuery plugin for displaying galeries and other content the way youwant. Checkout the different presets in the upper menu! Especially the Gallery and Thumbnails preset.The rondell demos can be controlled with your keyboard, by clicking the controls or by clicking the rondell items. Touching items and swiping on a phone or tablet computer will work too! The plugin has been tested with and should work fine with: IE 7-9, Firefox 3.6+, Chrome, Safari 4+, Opera 11+.
20. dbpasCarousel
Another jQuery carousel plugin!
Subscribe & Get E-Mail Updates Delivered
Our informative Design related articles featuring the latest Resources for Web Designers & the Web get delivered via email dialy. Thousands of readers have signed up already. Why don't you subscribe as well, and get articles delivered to your inbox?
Related Posts
JS Carousel (carousel.js)
The Carousel plugin is a component for cycling through elements, like a carousel (slideshow).
For a tutorial about Carousels, read our Bootstrap Carousel Tutorial.
Note: Carousels are not supported properly in Internet Explorer 9 and earlier (because they use CSS3 transitions and animations to achieve the slide effect).
The Carousel Plugin Classes
Class | Description |
---|---|
.carousel | Creates a carousel |
.slide | Adds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect |
.carousel-indicators | Adds indicators for the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing) |
.carousel-inner | Adds slides to the carousel |
.icon-next | Unicode icon (arrow pointing right), used in carousels. This is often used instead of a glyphicon |
.icon-prev | Unicode icon (arrow pointing left), used in carousels. This is often used instead of a glyphicon |
.item | Specifies the content of each slide |
.left carousel-control | Adds a left button to the carousel, which allows the user to go back between the slides |
.right carousel-control | Adds a right button to the carousel, which allows the user to go forward between the slides |
.carousel-caption | Specifies a caption for the carousel |
Via data-* Attributes
The
data-ride='carousel'
attribute activates the carousel.The
data-slide
and data-slide-to
attributes specifies which slide to go to.The
data-slide
attribute accepts two values: prev or next, while data-slide-to
accept numbers.Example
<!-- Carousel -->
<div>
<!-- Carousel Indicators -->
<li></li>
<!-- Carousel Controls -->
<a href='#myCarousel'>
Try it Yourself »<div>
<!-- Carousel Indicators -->
<li></li>
<!-- Carousel Controls -->
<a href='#myCarousel'>
Via JavaScript
Enable manually with:
Example
// Activate Carousel
$('#myCarousel').carousel();
// Enable Carousel Indicators
$('.item').click(function(){
$('#myCarousel').carousel(1);
});
// Enable Carousel Controls
$('.left').click(function(){
$('#myCarousel').carousel('prev');
});
Try it Yourself »$('#myCarousel').carousel();
// Enable Carousel Indicators
$('.item').click(function(){
$('#myCarousel').carousel(1);
});
// Enable Carousel Controls
$('.left').click(function(){
$('#myCarousel').carousel('prev');
});
Carousel Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in.
Name | Type | Default | Description | Try it |
---|---|---|---|---|
interval | number, or the boolean false | 5000 | Specifies the delay (in milliseconds) between each slide. Note: Set interval to false to stop the items from automatically sliding | |
pause | string, or the boolean false | 'hover' | Pauses the carousel from going through the next slide when the mouse pointer enters the carousel, and resumes the sliding when the mouse pointer leaves the carousel Note: Set pause to false to stop the ability to pause on hover | |
wrap | boolean | true | Specifies whether the carousel should go through all slides continuously, or stop at the last slide
|
Carousel Methods
The following table lists all available carousel methods.
Method | Description | Try it |
---|---|---|
.carousel(options) | Activates the carousel with an option. See options above for valid values | Try it |
.carousel('cycle') | Goes through the carousel items from left to right | Try it |
.carousel('pause') | Stops the carousel from going through items | Try it |
.carousel(number) | Goes to a specified item (zero-based: first item is 0, second item is 1, etc..) | Try it |
.carousel('prev') | Goes to the previous item | Try it |
.carousel('next') | Goes to the next item | Try it |
Carousel Events
The following table lists all available carousel events.
Event | Description | Try it |
---|---|---|
slide.bs.carousel | Occurs when the carousel is about to slide from one item to another | Try it |
slid.bs.carousel | Occurs when the carousel has finished sliding from one item to another | Try it |
More Examples
Captions to Slides
Add
<div>
within each <div>
to create a caption for each slide:Example
Chania
The atmosphere in Chania has a touch of Florence and Venice.
Chania
The atmosphere in Chania has a touch of Florence and Venice.
PreviousNextJquery 3d Carousel Slider
<div>
<!-- Indicators -->
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<!-- Wrapper for slides -->
<div>
<div>
<img src='img_chania.jpg' alt='Chania'>
<div>
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div>
<img src='img_chania2.jpg' alt='Chania'>
<div>
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div>
<img src='img_flower.jpg' alt='Flower'>
<div>
<h3>Flowers</h3>
<p>Beautiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div>
<img src='img_flower2.jpg' alt='Flower'>
<div>
<h3>Flowers</h3>
<p>Beautiful flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a href='#myCarousel'>
<span aria-hidden='true'></span>
<span>Previous</span>
</a>
<a href='#myCarousel'>
<span aria-hidden='true'></span>
<span>Next</span>
</a>
</div>
<!-- Indicators -->
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<!-- Wrapper for slides -->
<div>
<div>
<img src='img_chania.jpg' alt='Chania'>
<div>
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div>
<img src='img_chania2.jpg' alt='Chania'>
<div>
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div>
<img src='img_flower.jpg' alt='Flower'>
<div>
<h3>Flowers</h3>
<p>Beautiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div>
<img src='img_flower2.jpg' alt='Flower'>
<div>
<h3>Flowers</h3>
<p>Beautiful flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a href='#myCarousel'>
<span aria-hidden='true'></span>
<span>Previous</span>
</a>
<a href='#myCarousel'>
<span aria-hidden='true'></span>
<span>Next</span>
</a>
</div>