Owlcarousel2“点：真”不工作？

时间：2018-01-30 12:36:46

标签： javascript jquery css owl-carousel

我正在尝试使用owl-carousel插件制作旋转木马，但我遇到了显示点的问题。尽管在javascript上启用了点，但未显示点。这是猫头鹰旋转木马2的问题吗？我尝试在owl-carousel类中添加owl-dots类。它确实会产生一些结果，但会显示一个额外的点。这是你的小提琴：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));

2 个答案:

答案 0 :(得分：4)

'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'类，因为没有足够的项目来循环。

答案 1 :(得分：3)

我无法调试为什么你的点没有出现...据说你可以使用这个工作从你的DOM中移除已禁用的类，这是当前隐藏它们的。用css你可以修复你的圆点风格...... 

(function ($) {

function setDots(){
  $("#testimonial-slides .owl-dots").removeClass('disabled');
}

$(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));
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<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 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>

EDITION 正如建议@navigator你设置3个元素并声明四个元素，如果添加更多元素并设置默认配置，你会看到出现的点......

相关问题
最新问题