Simple and Responsive jQuery Carousel Plugin - responsiveCarousel

responsiveCarousel is a lightweight (~5.4kb minified), responsive and touch-friendly jQuery plugin that helps you simply to create multiple Carousel like galleries which accept any type of html elements. It supports auto rotation and Swipe / keyboard navigation.

See also:

• jQuery Waterwheel Carousel Plugin
• Performant and Touch-Friendly Carousel Plugin for jQuery - microfiche.js
• Intuitive & Lightweight Carousel Plugin - Looper.js
• Highly Customizable Carousel For jQuery - rondell
• Lightweight Carousel Plugin For jQuery - Cycle.js
• Simple Carousel Slidershow Plugin with jQuery  - microfiche
• Responsive Carousel Slideshow with jQuery
• Automatic Infinite Carousel with jQuery
• Responsive and Touch-Enabled Carousel Plugin - RS Carousel
• Easy Carousel Slider Plugin with jQuery - Open Carousel
• jQurty HTML Content Carousel Plugin - jcarousel
• Simple Carousel Slideshow with Transition Effect - monteserinGallery

Basic Usage:

1. Include jQuery library and jQuery responsiveCarousel on the page

<script src="jquery.min.js"></script>
<script src="responsiveCarousel.min.js"></script>

2. Include hammer.js for swipe events

<script src="js/jquery.hammer.min.js"></script>

3. Markup html structure

<div id="nav-01" class="crsl-nav"> 
<a href="#" class="previous">&laquo; Previous</a> 
<a href="#" class="next">Next &raquo;</a> 
</div>

<div class="demo crsl-items" data-navigation="nav-01">
<div class="crsl-wrap">

<figure class="crsl-item"> <img src="1.jpg" alt="Feature 1" width="800" height="450" class="wide-image" />
<figcaption>Content 1</figcaption>
</figure>

<figure class="crsl-item"> <img src="2.jpg" alt="Feature 2" width="800" height="450" class="wide-image" />
<figcaption>Content 2</figcaption>
</figure>

...

</div>
</div>

4. Call the plugin and done.

jQuery(document).ready(function($){
  $('.demo').carousel();
});

5. Available options.

• visible: Number of items visible in the gallery.
• infinite: Infinite loop.
• speed: Animation speed between items.
• overflow: Can set the overflow of the gallery, showing no visible elements.
• autoRotate: This option allow you to change the items automatically. Value is the time interval in which the elements rotate.
• navigation: Gets the id of the container paging buttons.
• itemMinWidth: Minimum width for each item. If the width of the item is less than the minimum, reduce the number of items visible.
• itemMargin: Distance between items
• itemClassActive: Class HTML for active item
• imageWideClass: Wide image class
• carousel: Carousel mode

$('.demo').carousel({
  infinite : true,
  visible : 1,
  speed : 'fast',
  overflow : false,
  autoRotate : false,
  navigation : $(this).data('navigation'),
  itemMinWidth : 0,
  itemEqualHeight : false,
  itemMargin : 0,
  itemClassActive : 'crsl-active',
  imageWideClass : 'wide-image',
  carousel : true
});

Changelog:

v1.2.2 (2019-08-19)

• Bugfix

---

This awesome jQuery plugin is developed by basilio. For more Advanced Usages, please check the demo page or visit the official website.