Responsive Multi-slide Image Carousel Plugin - VM Carousel
| File Size: | 11.9 KB |
|---|---|
| Views Total: | 10972 |
| 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.










