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

Question

我正在使用 Owl Carousel 2。我想为每个项目显示一个点，但我想一次显示 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

    });
});

Answer 1

只需将您的 JS 更改为：

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