使用方法:
一、在网页的head标签内添加
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
二、引入JS
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
三、设置html的banner内容
<div class="owl-carousel owl-theme">
<div class="item"><img src="images/7.jpg" style="height:400px;width:980px;object-fit:cover;"></img></div>
<div class="item"><img src="images/8.jpeg" style="height:400px;width:980px;object-fit:cover;"></img></div>
<div class="item"><img src="images/9.jpg" style="height:400px;width:980px;object-fit:cover;"></img></div>
<div class="item"><img src="images/10.jpg" style="height:400px;width:980px;object-fit:cover;"></img></div>
</div>
四、调用插件
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
当然,我按照自己的项目给调整了一下,常用的内容也就下面这些,简单的说一下:
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
loop:true,
margin:10,
nav:false,
autoplay:true,
autoplayTimeout:5000,
autoplayHoverPause:true,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
});
});
-
设置了Autoplay,5秒播放一帧,打开了鼠标悬停功能。
-
Presonsive,打开响应式功能,各种宽度下,每页都显示一张图片。
-
关闭nav导航,nav导航就是向左和向右的两个箭头。
五、定制需求
总觉得Banner下方的导航点很丑,想了想还是将Banner下方的导航点挪到Banner里面。
方式:修改CSS即可。
.owl-theme .owl-dots {
position:absolute;
bottom:0;
width:100%;
margin:0 auto;
}
下图是调整前,调整后对比,导航点已经移至图片中下方。
评论
No comments yet.