如何在猫头鹰轮播中显示分页点

时间:2018-09-27 04:46:14

标签: javascript html owl-carousel

我正在使用Owl Carousel2。我想为每个项目显示一个点,但是我想一次显示5个点。谁能建议我该怎么做?谢谢。 HTML:

<div id="owl-demo" class="owl-carousel">
        <div class="item">
            <img src="images/banner/A.png" alt="A"/>
        </div>
        <div class="item">
            <img src="images/banner/B.png" alt="B"/>
        </div>
        <div class="item">
            <img src="images/banner/C.png" alt="C"/>
        </div>
        <div class="item">
            <img src="images/banner/D.png" alt="D"/>
        </div>
        <div class="item">
            <img src="images/banner/E.png" alt="E"/>
        </div>
        <div class="item">
            <img src="images/banner/F.png" alt="F"/>
        </div>
    </div>
<div id="dots" class="owl-carousel">
    <div class="item"><span>A</span></div>
    <div class="item"><span>B</span></div>
    <div class="item"><span>C</span></div>
    <div class="item"><span>D</span></div>
    <div class="item"><span>E</span></div>
    <div class="item"><span>F</span></div>
</div>

JS:

$(document).ready(function(){
    $("#owl-demo").owlCarousel({
        items:1,
        loop: true,
        autoplay:true,
        autoplaySpeed: 500,
        dots:true,
        dotsContainer:'#dots',
        nav: true

    });
});

1 个答案:

答案 0 :(得分:0)

只需将您的JS更改为:

12 14
22 24
29 31
77 79