Simple and Responsive jQuery Carousel Plugin - responsiveCarousel

Simple and Responsive jQuery Carousel Plugin - responsiveCarousel
File Size: 43.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/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

<script type="text/javascript">
jQuery(document).ready(function($){
$('.demo').carousel();
});
</script>

5. Options

  • visible: Number of items visible in the gallery.
  • 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

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