猫头鹰旋转木马 2 自定义点不可点击 [英] Owl Carousel 2 Custom Dots Not Clickable

问题描述

我正在使用 Owl Carousel 2 并尝试使用文本制作自定义点.自定义点显示出来，但单击它们时没有任何反应.IE.当您单击一个点时，它不会跳回相应的幻灯片，它只是什么都不做.单击自定义点时，如何使轮播转盘转到相应的幻灯片?

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

HTML:

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

<div class="item" data-dot="<span>3</span>"><img src="https://placehold.it/100">

<div class="item" data-dot="<span>4</span>"><img src="https://placehold.it/100">

JS:

$(document).ready(function(){$(".owl-carousel").owlCarousel({自动播放:真实，自动播放超时:4000，点:对，点数据:真，循环:真实，保证金:30，导航:假，中心:假，项目:1});});

解决方案

这是有效的代码:

$(document).ready(function(){让 owl = $(".owl-carousel").owlCarousel({自动播放:假，自动播放超时:2000，点:对，点数据:真，循环:真实，保证金:30，导航:假，中心:假，项目:1});$('.owl-dot').click(function() {owl.trigger('to.owl.carousel', [$(this).index(), 1000]);})});

I'm using Owl Carousel 2 and trying to make custom dots with text. The custom dots show up but nothing happens when you click them. I.e. when you click a dot it doesn't jump back to the appropriate slide, it just does nothing. How can I get the carousel the go to the appropriate slide when the custom dots are clicked?

The full code is here: 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
    });
});

解决方案

Here is the code that worked:

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

这篇关于猫头鹰旋转木马 2 自定义点不可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！