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

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.