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

Question

I am using Owl Carousel 2. I want to display a dot for every item, but I want to show 5 dots at a time. Can anyone suggest to me how I will do this? Thanks. 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

Just change your JS to:

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