Last update on .

Owl Carousel 2是一个基于Jquery的javascript插件。
项目地址:https://owlcarousel2.github.io/OwlCarousel2/
最新版本:2.3.4

使用方法:

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

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

评论

No comments yet.

Please log in by using LinkedIn Weibo to leave a comment.