Owl Carousel 2是上一版Owl Carousel 1.x的升级版本。Owl Carousel 2是可以让你创建漂亮的响应式旋转木马的jQuery插件,它支持移动触摸屏,有丰富的参数设置,甚至可以嵌入视频,功能十分强大。
Owl的新特性有:
可以无限循环
项目可以居中显示
灵活的速度控制
多级别的padding设置
项目间可以设置Margin
使几乎所有的选项都具有响应能力
多种宽度设置
丰富的回调事件
RTL(从右向左移动)
YouTube/Vimeo视频支持
锚链接导航
合并项
---------------------------------------------------------------------
使用方法:
1.引用js和css文件
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<script src="jquery.js"></script>
<script src="assets/owl-carousel/owl.carousel.js"></script>
2.页面结构html代码:
<div id="owl-example" class="owl-carousel">
<div> <img src="../img/carousel01.png"> </div>
<div> <img src="../img/carousel01.png"> </div>
<div> <img src="../img/carousel01.png"> </div>
</div>
3.实例化carousel:
$(document).ready(function() {
$("#owl-example").owlCarousel();
});
ok ! 刷新页面,查看轮播效果。
carousel2.0支持多种轮播效果,完美响应式和拖动(触摸屏)轮播。
参数配置(轮播效果):在实例化的时候配置参数
$(document).ready(function(){
$("#owl-example").owlCarousel({ /*对应ID调用*/
items: 1, /*onepage显示个数*/
loop: true, /*支持循环播放*/
nav: true, /*显示翻页条*/
autoplay:true, /*自动播放*/
autoplayTimeout:3000, /*自动播放间隔时间*/
autoplayHoverPause:true, /*鼠标悬停停止自动播放*/
slideBy: 'page', /*滑动的item个数,number or string(page)*/
mouseDrag: false, /*禁止鼠标拖拽*/
margin: 0, /*旋转木马的margin-right*/
});
});