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

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

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

Owl Carousel data-dot specific element click sends to first slide, but surrounding click sends to appropriate slide

javascript

jquery

owl-carousel-2