Щелчок элемента данных Owl Carousel отправляет на первый слайд, но окружающий щелчок отправляет на соответствующий слайд

Когда я нажимаю на точки в своей навигации с точками данных, кажется, что слайд сбрасывается на первый слайд. Однако, если я щелкну пиксели от 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.


javascript jquery owl-carousel-2
person Ishio    schedule 15.06.2017    source источник
comment
почему у вас есть два обработчика событий для одной и той же задачи .owl-dot и .owl-dot .fa-circle?   -  person karthick    schedule 15.06.2017
comment
И я бы использовал первый обработчик, который, кажется, работает. И я бы отказался от второго... Потому что .owl-dot все равно больше .fa-circle.   -  person Louys Patrice Bessette    schedule 15.06.2017
comment
Изучив элементы, вы увидите, что я их закомментировал. Я просто добавил их сюда, чтобы показать, что я пробовал до сих пор/   -  person Ishio    schedule 15.06.2017
comment
Это должно работать, если вы просто удалите обработчик событий, связанный с элементами fa-circle. Все клики будут обрабатываться на уровне owl-dot, что, кажется, работает. Я могу получить этот результат на вашем веб-сайте, установив атрибут CSS pointer-events: none для каждого элемента fa-circle.   -  person ConnorsFan    schedule 19.06.2017
comment
@ConnorsFan Я не знаю, почему это не сработало для меня раньше, но если вы дадите мне это в качестве ответа, я могу дать вам награду.   -  person Ishio    schedule 20.06.2017

Ответы (1)


arrow_upward
5
arrow_downward

Когда я применяю атрибут 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' );
//})
person ConnorsFan    schedule 19.06.2017