OwlCarousel2-2.3.4 快速使用
html
<link rel="stylesheet" href="OwlCarousel2-2.3.4/dist/assets/owl.carousel.min.css"> <link rel="stylesheet" href="OwlCarousel2-2.3.4/dist/assets/owl.theme.default.min.css"> <script src="OwlCarousel2-2.3.4/dist/owl.carousel.min.js"></script> <div id="show"> <div class="owl-carousel" id="show_slider"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> </div>
css
/* 左右简头样式*/ #show .owl-next{ position:absolute; top:50%; margin-top:-24px; right:0px; z-index:9999; color:#164b72; } #show .owl-prev{ position:absolute; top:50%; margin-top:-24px; left:0px; z-index:9999; color:#164b72; } #show .iconfont{ font-size:48px; } #show .iconfont{ font-size:48px; font-weight:700; } #show .owl-nav .disabled{ color:#ddd; }
js
$('#show_slider').owlCarousel({ smartSpeed: 1000, //切换速度 autoplay:true,//自动轮播 autoplayTimeout:5000, navText: false, //左右箭头html dots:false,//显隐导行 nav:true, //显示左右箭头 loop:true,//循环轮播 margin:10, //轮播项目之间的边距 navText:['<span class="iconfont icon-xiangshang"></span>','<span class="iconfont icon-xiangshang"></span>'],//左右箭头内容 autoplayHoverPause:true,//鼠标悬停停止自动播放 responsive:{ 0: { items: 1 }, 450: { items: 1 }, 768: { items: 2 }, 1000: { items: 3 }, 1200: { items: 3 } } });