javascript - Owlcarousel2 "dots:true"不工作？

Question

我正在尝试使用 owl-carousel 插件制作轮播，但我在显示圆点时遇到了问题。尽管在 javascript 上启用了点，但它们并未显示。是owl carousel 2的问题吗？我尝试在 owl-carousel 类中添加 owl-dots 类。它确实产生了一些结果，但显示了一个额外的点。这是给你的 fiddle :https://jsfiddle.net/aoa9a457/ HTML:

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div id="testimonial-slides" class="owl-carousel owl-theme">
                        <div class="testmonial-slide-single-item text-center">
                            <img src="assets/image.jpg" alt="">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
                            <h5>Sabal Parajuli<span>Infotech</span></h5>
                        </div>
                        <div class="testmonial-slide-single-item text-center">
                                <img src="assets/image.jpg" alt="">
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
                                <h5>Sabal Parajuli<span>Infotech</span></h5>
                        </div>
                        <div class="testmonial-slide-single-item text-center">
                                <img src="assets/image.jpg" alt="">
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
                                <h5>Sabal Parajuli<span>Infotech</span></h5>
                        </div>
                </div>  

            </div>
        </div>
    </div>

CSS(我只是要展示 Owl Carousel )

.owl-carousel .owl-item img{
    display: block;
    width:160px;
}

.owl-dots {
    text-align: center;
    position: fixed;
    bottom: 5px;
    width: 100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.owl-dot {
    border-radius: 50px;
    height: 10px;
    width: 10px;
    display: inline-block;
    background: rgba(127,127,127, 0.5);
    margin-left: 5px;
    margin-right: 5px;
}

.owl-dot.active {
    background: rgba(127,127,127, 1);
}

Javascript

(function ($) {
$(document).ready(function() {
    $("#testimonial-slides").owlCarousel({
      items :4,
      margin: 10,
      loop: true,
      autoplay: true,
      smartSpeed: 1000,
      dots: true,
      center:true,
      responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        }
      }
    });
  });
}(jQuery));

Answer 1

'owl-dots disabled' 类也可以显示您是否没有足够的元素来启用点的功能。

在您的示例中，您似乎已将 owl carousel 配置设置为“items :4”，但只有 3 个 HTML 元素为“carousel”

$(document).ready(function() {
    $("#testimonial-slides").owlCarousel({
      items :4, <<
      margin: 10,
      loop: true,
      autoplay: true,
      smartSpeed: 1000,
      center:true,
      responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        }
      },
      onInitialized:setDots,
      onChanged:setDots
    });
  });
}(jQuery));

这可能只是您的 HTML 标记，但按照您的示例代码，这将显示“owl-dots disabled”类，因为没有足够的元素可以循环。