Owl Carouselデータドット固有の要素クリックが最初のスライドに送信されますが、周囲のクリックが適切なスライドに送信されます

Question

データドット内のドットをクリックすると、スライドが最初のスライドにリセットされたように見えます。ただし、fa-circleまたはテキストのピクセルをクリックすると、適切なスライドに移動します。私はイベントの発射を見てみましたが、何が起こっているのかは分かりません。

Here is a link to my site in progress

私は特に困難では何も実行していないよ、と一緒に遊んで、コードのこのビットを使用せずにされています：

私はスライド要素に呼び出す：

<div class="item" data-dot ="<span><i class='fa fa-circle'></i></span><span><?php _e($i['description'], 'firkisok');?></span>"> 
    Content item stuff happens here 
</div> 

(function($) { 
    $(function() { 

    // Call Vars 
    var owl = $('.owl-carousel'); 

    // Setup owlCarousel 
    owl.owlCarousel({ 
     dots: true, 
     dotsData: true, 
     center: true, 
     autoWidth: true, 
     smartSpeed: 500, 
    }); 

    $('.owl-dot').on('click', function() { 
     owl.trigger('to.owl.carousel', [$(this).index(), 300]); 
     $('.owl-dot').removeClass('active'); 
     $(this).addClass('active'); 
    }) 
    $('.owl-dot span .fa-circle').on('click', function() { 
     owl.trigger('to.owl.carousel', [$(this).index(), 300]); 
     $('.owl-dot').removeClass('active'); 
     $(this).parent().parent().addClass('active'); 
    }) 
})(jQuery); 

アクティブであるかどうかにかかわらず、イベントは同じように発生します。fa-circleをクリックすると、スライドショーがスライド1にリセットされます。

Answer 1

CSSの属性pointer-events: noneをWebページのfa-circle要素に適用すると、カルーセルが正しく機能します。つまり、これらのサークルエレメントのイベントハンドラは不要で、問題が発生するだけです。したがって、あなたはそれを完全に削除し、owl-dot要素にのみイベントハンドラを保つことができます。

$('.owl-dot').on('click', function() { 
    owl.trigger('to.owl.carousel', [$(this).index(), 300]); 
    $('.owl-dot').removeClass('active'); 
    $(this).addClass('active'); 
}) 

// Remove this event handler 
//$('.owl-dot span .fa-circle').on('click', function() { 
// owl.trigger('to.owl.carousel', [$(this).index(), 300]); 
// $('.owl-dot').removeClass('active'); 
// $(this).parent().parent().addClass('active'); 
//})