Question

我正在使用Owl Carousel 2，并尝试使用文本制作自定义点。自定义点显示，但单击它们时什么也没有发生。即当您单击一个点时，它不会跳回到相应的幻灯片，它什么也没做。单击自定义点后，如何使轮播转到相应的幻灯片？

完整代码在这里：https://codepen.io/anon/pen/ZqKaEZ

HTML：

<div class="owl-carousel owl-theme">
<div class="item" data-dot="<span>1</span>">
  <img src="https://placehold.it/100">
</div>
<div class="item" data-dot="<span>2</span>">
  <img src="https://placehold.it/100">
</div>
<div class="item" data-dot="<span>3</span>">
  <img src="https://placehold.it/100">
</div>
<div class="item" data-dot="<span>4</span>">
  <img src="https://placehold.it/100">
</div>

JS：

$(document).ready(function(){
  $(".owl-carousel").owlCarousel({
        autoplay: true,
        autoplayTimeout: 4000,
        dots: true,
        dotsData:true,
        loop: true,
        margin: 30,
        nav: false,
        center: false,
        items: 1
    });
});

Answer 1

这是有效的代码：

$(document).ready(function(){
    let owl = $(".owl-carousel").owlCarousel({
        autoplay: false,
        autoplayTimeout: 2000,
        dots: true,
        dotsData:true,
        loop: true,
        margin: 30,
        nav: false,
        center: false,
        items: 1
    });

    $('.owl-dot').click(function() {
        owl.trigger('to.owl.carousel', [$(this).index(), 1000]);
    })
});

Answer 2

<div class="testimonial_slider owl-carousel owl-theme">
    <div class="item" data-dot="<img src='images/testimonial-1.jpg' alt='' class='img-fluid' />">
        <div class="testimonial-content text-center">
            <div class="testimonial-dec">
                <h4>Aklima The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections Bonorum et Malorum original.</h4>
            </div>
            <div class="testimonial-name mt-4">
                <p class="border-bottom d-inline-block"><span class="d-inline-block text-uppercase text-dark">AKLIMA</span>  - COO, AMERIMAR ENTERPRISES, INC.</p>
            </div>
        </div>
    </div>
    <div class="item" data-dot="<img src='images/testimonial-1.jpg' alt='' class='img-fluid' />">
        <div class="testimonial-content text-center">
            <div class="testimonial-dec">
                <h4>Aklima The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections Bonorum et Malorum original.</h4>
            </div>
            <div class="testimonial-name mt-4">
                <p class="border-bottom d-inline-block"><span class="d-inline-block text-uppercase text-dark">AKLIMA</span>  - COO, AMERIMAR ENTERPRISES, INC.</p>
            </div>
        </div>
    </div>
</div>

<script>

    $('.testimonial_slider').owlCarousel({
        loop:false,
        margin:32,
        nav:false,
        dots: true,
        items:1,
        mouseDrag: false,
        dotsData: true,
    })

</script>

Answer 3

<div class="testimonial_slider owl-carousel owl-theme">
<div class="item" data-dot="<button><img src='images/testimonial-8.jpg' alt='' class='img-fluid' /></button>">
    <div class="testimonial-content text-center">
        <div class="testimonial-dec">
            <h4>Aklima The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections Bonorum et Malorum original.</h4>
        </div>
        <div class="testimonial-name mt-4">
            <p class="border-bottom d-inline-block"><span class="d-inline-block text-uppercase text-dark">AKLIMA</span>  - COO, AMERIMAR ENTERPRISES, INC.</p>
        </div>
    </div>
</div>

    $('.testimonial_slider').owlCarousel({
    loop:false,
    margin:32,
    nav:false,
    dots: true,
    items:1,
    mouseDrag: false,
    dotsData: true,
})

Answer 4

从js中的dotsData: true,和此https://codepen.io/anon/pen/ZqKaEZ的width: inherit; height: inherit;中删除.owl-theme .owl-dots .owl-dot span。它将起作用。

Answer 5

这就是答案

$(document).ready(function(){
let owl = $(".owl-carousel").owlCarousel({
    autoplay: false,
    autoplayTimeout: 2000,
    dots: true,
    dotsData:true,
    loop: true,
    margin: 30,
    nav: false,
    center: false,
    items: 1
});

$('.owl-dot').click(function() {
    $('.owl-dot').trigger('to.owl.carousel', [$(this).index(), 1000]);
})

});

猫头鹰轮播2自定义点不可点击

5 个答案: