VM Carousel 是一款 jQuery 响应式轮播图插件。该 jquery 轮播图插件支持自动播放模式,支持动态改变图片尺寸,支持居中模式,以及无限循环等。
在页面中引入 jquery.vm-carousel.css,jquery 和 jquery.vm-carousel.js 文件。
<link rel="stylesheet" href="path/to/jquery.vm-carousel.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.vm-carousel.js"></script>
使用一个无序列表作为该轮播图的 HTML 结构。
<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>
在页面 DOM 元素加载完毕之后,可以通过 vmcarousel()方法来初始化该轮播图插件。
$('.vmcarousel-normal').vmcarousel();
该 jquery 轮播图插件的可用配置参数如下:
$('.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()
});
delay:延迟时间,单位毫秒,默认为 400 毫秒
speed:过渡动画的速度,单位毫秒
autoplay:是否自动播放
items_to_show:初始化时显示的图片,0 表示自动计算
min_items_to_show:最少显示多少个项
centered:是否使用居中显示模式
infinite:是否无限循环
Github 地址:https://github.com/vedmant/vm-carousel
演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!