Owl Carousel 数据点特定元素点击发送到第一张幻灯片，但周围点击发送到适当的幻灯片

Question

当我单击数据点导航中的点时，幻灯片似乎重置为第一张幻灯片。但是，如果我单击fa-circle或 文本上的像素，它会转到相应的幻灯片。我试过观察事件的发生，但我似乎根本无法找出是什么导致了这种情况。

这是我的网站的链接正在进行中

我没有在特别困难的情况下运行任何东西，并且一直在使用和不使用这段代码：

我调用幻灯片元素：

<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应用于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' );
//})