jquery - Owl Carousel 2自定义点不可点击

我正在使用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
    });
});

最佳答案

这是起作用的代码：

$(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]);
    })
});

关于jquery - Owl Carousel 2自定义点不可点击，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52749200/