Responsive Multi-slide Image Carousel Plugin - VM Carousel

File Size: 11.9 KB
Views Total: 10740
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive Multi-slide Image Carousel Plugin - VM Carousel

Just another jQuery responsive image slider / carousel plugin that features autoplay, dynamic resizing, centering mode, infinite looping, multiple images per slide and much more.

How to use it:

1. Include the core style sheet jquery.vm-carousel.css in the head, and the JavaScript file jquery.vm-carousel.js at the bottom of the html document.

<link rel="stylesheet" href="jquery.vm-carousel.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.vm-carousel.js"></script>

2. Create an image carousel from an html list as this:

<ul class="vmcarousel-normal">
  <li><img src="1.jpg" alt=""></li>
  <li><img src="2.jpg" alt=""></li>
  <li><img src="3.jpg" alt=""></li>
  <li><img src="4.jpg" alt=""></li>
  <li><img src="5.jpg" alt=""></li>
  <li><img src="6.jpg" alt=""></li>
</ul>

3. Call the function on the html list to generate a basic carousel interface.

$('.vmcarousel-normal').vmcarousel();

4. Plugin's default options to customize the carousel.

$('.vmcarousel-normal').vmcarousel({

  // delay in ms
  delay: 4000,

  // transition speed
  speed: 500,

  // enabe autoplay
  autoplay: true,

  // 0 for auto calc
  items_to_show: 0, 

  // min number of items
  min_items_to_show: 2,

  // items to slide at a time
  items_to_slide: 1,
  dont_cut: true,

  // center the current image
  centered: false,

  // start item
  start_item: 0,
  start_item_centered: false,

  // infinite loop
  infinite: false,

  // callback
  changed_slide: $.noop()

});

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