当前位置:JS特效 » 幻灯片和轮播图 » VM Carousel-jQuery响应式轮播图插件
 VM Carousel-jQuery响应式轮播图插件
如果您觉得内容不错,请分享:

插件介绍

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

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:53
简要教程

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

使用方法

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



       
                
HTML结构

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

初始化插件

在页面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:是否无限循环。

vm-carousel jquery轮播图插件的github地址为:https://github.com/vedmant/vm-carousel

Top