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.

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.

• javascript
• jquery
• owl-carousel-2

Share Improve this question Follow edited Jun 15, 2017 at 17:50 Ishio asked Jun 15, 2017 at 16:21 IshioIshio 76522 gold badges99 silver badges2929 bronze badges 5

• why do you have two event handers for the same task .owl-dot and .owl-dot .fa-circle? – karthick Commented Jun 15, 2017 at 17:54
• And I would use the first handler, wich seems to work. And I would drop the second... Because .owl-dot is over the .fa-circle anyway. – Louys Patrice Bessette Commented Jun 15, 2017 at 17:58
• Inspecting the elements, you'll see that I mented them outI merely added them here to show what i've tried so far/ – Ishio Commented Jun 15, 2017 at 18:22
• 1 It should work if you just remove the event handler associated with the fa-circle elements. All the clicks would be handled at the owl-dot level, which seems to work. I can get that result on your Web site by setting the CSS attribute pointer-events: none on each fa-circle element. – Martin Parenteau Commented Jun 19, 2017 at 20:43
• @ConnorsFan I don't know why that wouldn't work for me before, but if you give me that as the answer, I can give you the bounty. – Ishio Commented Jun 19, 2017 at 21:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5 +50

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