猫头鹰旋转木马 2 自定义点不可点击答案

【问题标题】：Owl Carousel 2 Custom Dots Not Clickable猫头鹰旋转木马 2 自定义点不可点击
【发布时间】：2018-10-10 21:43:08
【问题描述】：

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

完整代码在这里：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
    });
});

【问题讨论】：

我猜你可以尝试将插件的事件处理程序绑定到适当的元素

标签： jquery html css owl-carousel owl-carousel-2

【解决方案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]);
    })
});

【讨论】：

【解决方案2】：

<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,
})

【讨论】：

【解决方案3】：

<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>

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案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]);
})

});

【讨论】：

重复 - 相同的答案，被接受为这个问题的答案。

【解决方案6】：

解决办法：

我发现它确实可以在不添加额外的 jQuery 代码的情况下工作。您只需要遵循自定义点导航的原始 HTML 结构即可。使用dotsData: true 时，脚本适用于按钮标签，因此只需将按钮标签重新插入data-dot。

例如：

<div class="item" data-dot="<button>Name</button>"><h4>Name</h4></div>

这会将您的自定义点内容呈现为一个按钮，您可以像往常一样导航这些点。

【讨论】：