Simple and Responsive jQuery Carousel Plugin - responsiveCarousel

File Size: 42 KB
Views Total: 6069
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:

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.