首页 > 解决方案 > 在 Owl Carousel 2.3.4 中获取错误的点数

问题描述

当我删除自动宽度时,我的 Owl Carousel 的点数错误,但当我设置自动宽度时,它让我的点数错误。

错误的计数,比如我在轮播上总共设置了 8 张图像,它显示了 4 个的 8 个点实例(我设置了类似项目:2 和 slideBy:2)

现场演示:检查桌面分辨率。

HTML:

<div id=”client-testimonialslider” class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
</div>

$(document).ready(function(){
$('#client-testimonialslider').owlCarousel({
    rtl:true,
    loop:true,
    nav:false,
    margin:30,
    items: 2,
    slideBy: 2,
    itemsDesktopSmall : [900,1], // betweem 900px and 601px
    itemsTablet: [700,1], // 2 items between 600 and 480
    itemsMobile : [479,1] , // 1 item between 479 and 0
    autoplay:true,
    autoplayTimeout:10000,
    responsive:{
       0:{
            items:1,
            slideBy: 1
        },
        600:{
            items:1,
            slideBy: 1
        },
        992:{
            items:2,
            slideBy: 1,
            autoWidth:true
        },
        1201:{
            items:3,
            autoWidth:true
        },
        1400:{
            items:1,
            autoWidth:true
        },
        1600:{
            items:3,
            autoWidth:true
        },
        1800:{
            items:3,
            autoWidth:true
        },
        2000:{
            items:4,
            autoWidth:true
        }
    }
});
});

请帮我解决这个问题。

先感谢您。

标签: owl-carousel

解决方案


使用“dotsEach”选项指定每个项目的点数。

$('.owl-carousel').owlCarousel({
    "dots": true,
    "dotsEach": 1
});

推荐阅读