Eulenkarussell Datenpunkt-spezifisches Element Klick sendet an die erste Folie, aber Umgebungsklick sendet an entsprechende Folie

Question

Wenn ich auf die Punkte in meinem Datenpunkt-Nav klicke, scheint die Folie auf die erste Folie zurückzusetzen. Wenn ich jedoch auf die Pixel fa-circle oder den Text klicke, wird die entsprechende Folie angezeigt. Ich habe versucht, die Ereignisse zu beobachten, aber ich kann nicht herausfinden, was das alles verursacht.

Here is a link to my site in progress

Ich bin mit nichts in besonders schwierig, und haben das Spiel mit und ohne dieses Stück Code verwendet:

ich zu dem Schiebeelement rufen mit:

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

Ob es aktiv ist oder nicht, das Ereignis wird immer noch gleich ausgeführt. Wenn Sie auf fa-circle klicken, wird die Diashow auf Folie 1 zurückgesetzt.

Answer 1

Wenn ich das CSS-Attribut pointer-events: none auf die Elemente fa-circle auf Ihrer Webseite anwende, funktioniert das Karussell korrekt. Das sagt mir, dass der Event-Handler auf diesen Kreiselementen nicht benötigt wird und nur Probleme verursacht. Daher können Sie es vollständig entfernen und nur die Event-Handler auf den owl-dot Elemente halten:

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