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

Question

When I am click on the dots within my data-dot nav, the slide seems to reset to the first slide. However, if I click pixels off the fa-circle, or the text, it goes to the appropriate slide. I've tried watching the events firing, but I can't seem to find out what is causing that at all.

Here is a link to my site in progress

I'm not running anything in particularly difficult, and have been playing with and without using this bit of code:

I call to the slide element with:

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

Whether it's active or not, the event still happens the same, clicking fa-circle resets the slideshow to slide 1.

Answer 1

When I apply the CSS attribute pointer-events: none to the fa-circle elements on your Web page, the carousel works correctly. That tells me that the event handler on these circle elements is not needed and only causes problems. Therefore, you can remove it completely and keep only the event handler on the owl-dot elements:

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