Question

当我点击数据点导航中的点时，幻灯片似乎重置为第一张幻灯片。但是，如果我点击fa-circle或文本中的像素，它会转到相应的幻灯片。我已经尝试过观看事件的发射，但我似乎无法找出造成这种情况的原因。

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

我用：

调用slide元素

<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 Carousel数据点特定元素点击发送到第一张幻灯片，但周围点击发送到适当的幻灯片

1 个答案: