owl carousel2 轮播插件/支持响应式和触屏滑动

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*/
			
		});
	});

参数选项参考:http://www.jq22.com/jquery-info6010

猜你喜欢

转载自blog.csdn.net/qq_41983960/article/details/80819328
owl
今日推荐