使用Owl Carousel 2快速实现网页Banner轮播效果

使用方法：

一、在网页的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
            }
        }
    });
});

1. 设置了Autoplay，5秒播放一帧，打开了鼠标悬停功能。

2. Presonsive，打开响应式功能，各种宽度下，每页都显示一张图片。

3. 关闭nav导航，nav导航就是向左和向右的两个箭头。

五、定制需求

总觉得Banner下方的导航点很丑，想了想还是将Banner下方的导航点挪到Banner里面。

方式：修改CSS即可。

.owl-theme .owl-dots {
    position:absolute;
    bottom:0;
    width:100%;
    margin:0 auto;
}

下图是调整前，调整后对比，导航点已经移至图片中下方。