jQuery旋转木马插件（Owl Carousel 2）

下载地址：https://owlcarousel2.github.io/OwlCarousel2/

参考文档：http://www.htmleaf.com/jQuery/Slideshow-Scroller/201502161387.html

 

css引入：

<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">   

 

js尾部添加 jquery.js 和 owl.carousel.min.js 文件 ：

<script src="owlcarousel/owl.carousel.min.js"></script> 

 

 

HTML示例：

<div class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

 

js 示例：

$(document).ready(function(){
    /**
     * owl-carousel
     */
    var owl = $('.owl-carousel');
    owl.owlCarousel({
        items:4,　　//在屏幕中可见的旋转木马项
        loop:true,　　//是否无限循环，会复制第一项和最后一项来制作无限循环的错觉
        margin:10,　　//图片间距10px
        autoplay:true,　　//旋转木马是否自动播放
        autoplayTimeout:3000,　　//旋转木马自动播放的时间间隔
        autoplayHoverPause:true,　　//是否在鼠标滑过时停止自动播放
        dots:false　　//显示圆点导航按钮
    });
});

 

效果参考（来自官网，按照我的js配置，圆点和导航箭头去掉了）：

 

 

 

　　　　　　　　　　　　　　　　　　　　下表中是所有内置的Owl Carousel参数选项：

 

 

参数名称	参数类型	默认值	描述
items	Type: Number	Default: 3	在屏幕中可见的旋转木马项
margin	Type: Number	Default: 0	旋转木马项的margin-right值，单位像素
loop	Type: Boolean	Default: false	是否无限循环，会复制第一项和最后一项来制作无限循环的错觉
center	Type: Boolean	Default: false	旋转木马项居中。在奇数和偶数项中都可以很好的工作
mouseDrag	Type: Boolean	Default: true	是否可以使用鼠标拖拽
touchDrag	Type: Boolean	Default: true	是否可以触摸拖拽
pullDrag	Type: Boolean	Default: true	Stage pull to edge.
freeDrag	Type: Boolean	Default: false	Item pull to edge
stagePadding	Type: Number	Default: 0	Stage上的Padding left和Padding right(可以看到相邻的项)
merge	Type: Boolean	Default: false	合并旋转木马项。Looking for data-merge='{number}' inside item..
mergeFit	Type: Boolean	Default: true	如果屏幕比旋转木马项小，使旋转木马项适合屏幕大小
autoWidth	Type: Boolean	Default: false	设置非网格内容。尝试在div上使用width样式
startPosition	Type: Number/String	Default: 0	开始点或URL Hash字符串，如：'#id'
URLhashListener	Type: Boolean	Default: false	监听url hash 的变化。必须在旋转木马项上设置data-hash属性
nav	Type: Boolean	Default: false	显示ext/prev按钮
navRewind	Type: Boolean	Default: true	跳转到前一项或后一项
navText	Type: Array	Default: ['next','prev']	HTML箭头导航
slideBy	Type: Number/String	Default: 1	Navigation slide by x. 'page' string can be set to slide by page.
dots	Type: Boolean	Default: true	显示圆点导航按钮
dotsEach	Type: Number/Boolean	Default: false	每多少个项显示一个圆点导航按钮
dotData	Type: Boolean	Default: false	使用data-dot的内容
lazyLoad	Type: Boolean	Default: false	是否懒加载图片。data-src和data-src-retina为高分辨率。如果元素不是<img>会设置为元素的内联背景图像。
lazyContent	Type: Boolean	Default: false	lazyContent选项只在测试版中有，发行版中已经被删除。
autoplay	Type: Boolean	Default: false	旋转木马是否自动播放
autoplayTimeout	Type: Number	Default: 5000	旋转木马自动播放的时间间隔
autoplayHoverPause	Type: Boolean	Default: false	是否在鼠标滑过时停止自动播放
smartSpeed	Type: Number	Default: 250	速度计算
fluidSpeed	Type: Boolean	Default: Number	速度计算
autoplaySpeed	Type: Number/Boolean	Default: false	旋转木马自动播放的速度
navSpeed	Type: Number/Boolean	Default: false	旋转木马导航的速度
dotsSpeed	Type: Boolean	Default: Number/Boolean	分页的速度
dragEndSpeed	Type: Number/Boolean	Default: false	Drag end speed
callbacks	Type: Boolean	Default: true	是否允许回调函数
responsive	Type: Object	Default: empty object	包含responsive选项的对象。设置为flase取消responsive能力。
responsiveRefreshRate	Type: Number	Default: 200	Responsive的刷新频率
responsiveBaseElement	Type: DOM element	Default: window	可以设置在任何DOM元素上。如果你关心不支持响应式的浏览器（如IE8），可以在包裹容器中使用该属性。
responsiveClass	Type: Boolean	Default: false	可选的辅助class。添加owl-reponsive-和breakpoint class到主元素上。可以在给定breakpoint的元素上设置内容样式。
video	Type: Boolean	Default: false	是否允许添加YouTube/Vimeo视频。
videoHeight	Type: Number/Boolean	Default: false	设置视频的高度。
videoWidth	Type: Number/Boolean	Default: false	设置视频的宽度。
animateOut	Type: String/Bolean	Default: false	CSS3 animation out.
animateIn	Type: String/Bolean	Default: false	CSS3 animation in.
fallbackEasing	Type: String	Default: swing	Easing for CSS2 $.animate.
info	Type: Function	Default: false	获取基本信息的回调函数(当前的 item/pages/widths) 。Info函数的第二个参数是Owl DOM元素的对象引用。
nestedItemSelector	Type: String/Class	Default: false	当owl元素嵌套在某些很深的DOM结构中时使用该参数。在class名字前面不要使用.号。
itemElement	Type: String	Default: div	owl-item的DOM元素类型。
stageElement	Type: String	Default: div	owl-stage.的DOM元素类型。
navContainer	Type: String/Class/ID/Bolean	Default: false	设置自定义的导航容器class
dotsContainer	Type: String/Class/ID/Bolean	Default: false	设置自定义的导航容器class

  

 

转载于:https://www.cnblogs.com/layla/p/11041563.html