幻灯片/轮播

VM Carousel - 响应式轮播图jQuery插件

面包多

VM Carousel - 响应式轮播图jQuery插件-创客云
VM Carousel 是一款 jQuery 响应式轮播图插件。该 jquery 轮播图插件支持自动播放模式,支持动态改变图片尺寸,支持居中模式,以及无限循环等。

使用方法:

在页面中引入 jquery.vm-carousel.css,jquery 和 jquery.vm-carousel.js 文件。

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" href="path/to/jquery.vm-carousel.css">
  2. <script src="path/to/jquery.min.js"></script>
  3. <script src="path/to/jquery.vm-carousel.js"></script>

HTML 结构:

使用一个无序列表作为该轮播图的 HTML 结构。

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

初始化插件:

在页面 DOM 元素加载完毕之后,可以通过 vmcarousel()方法来初始化该轮播图插件。

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

配置参数:

该 jquery 轮播图插件的可用配置参数如下:

  1. $('.vmcarousel-normal').vmcarousel({
  2.  
  3.   // delay in ms
  4.   delay: 4000,
  5.  
  6.   // transition speed
  7.   speed: 500,
  8.  
  9.   // enabe autoplay
  10.   autoplay: true,
  11.  
  12.   // 0 for auto calc
  13.   items_to_show: 0, 
  14.  
  15.   // min number of items
  16.   min_items_to_show: 2,
  17.  
  18.   // items to slide at a time
  19.   items_to_slide: 1,
  20.   dont_cut: true,
  21.  
  22.   // center the current image
  23.   centered: false,
  24.  
  25.   // start item
  26.   start_item: 0,
  27.   start_item_centered: false,
  28.  
  29.   // infinite loop
  30.   infinite: false,
  31.  
  32.   // callback
  33.   changed_slide: $.noop()
  34.  
  35. });

详细参数:

delay:延迟时间,单位毫秒,默认为 400 毫秒

speed:过渡动画的速度,单位毫秒

autoplay:是否自动播放

items_to_show:初始化时显示的图片,0 表示自动计算

min_items_to_show:最少显示多少个项

centered:是否使用居中显示模式

infinite:是否无限循环
Github 地址:https://github.com/vedmant/vm-carousel

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!