Owl Carousel - пропускает прошлые изображения, используя Prev / Next

Наша настраиваемая карусель «Сова» ведет себя не так, как ожидалось: при перетаскивании и использовании стрелок клавиатуры вы переходите к следующему слайду, а стрелки «предыдущий» и «следующий» перескакивают через следующий слайд на следующий.

Следующий слайд появляется ненадолго, но быстро переключается на следующий слайд.

Я пробовал несколько вещей в настройках main.js, но не играл в кости. Любые мысли будут очень признательны, так как я немного в тупике.

Код main.js:

$(document).ready(function() {

// initialise owl
  $(function() {
      var owl = $('.owl-carousel');
      owl.owlCarousel({
      items:1,
      lazyLoad:true,
      loop:true,
      useMouseWheel: false,
      nav: true,
      center: true,
      dots: false,
      margin: 0,
      stagePadding: 0,
      URLhashListener: true,
      startPosition: 'URLHash',
      animateIn: 'fadeIn',
      animateOut: 'fadeOut'
    });

    // click for next image
    $(owl).click(function() {
      owl.trigger('next.owl');
    })

      // add arrow keys to carousel navigation
      $(document).on('keydown', function( event ) { //attach event listener
        if(event.keyCode == 37) {
          owl.trigger('prev.owl')
        }
        if(event.keyCode == 39) {
          owl.trigger('next.owl')
          }
      });
      // end arrow keys



  }); // end owl


}); // end document ready

Рад поделиться любыми другими частями кода, если это будет полезно. Заранее спасибо за любое руководство!


javascript slider wordpress-theming owl-carousel
person Mike    schedule 23.09.2019    source источник
comment
Я считаю, что происходит то, что запускаются два события щелчка. Обратите внимание, что когда вы нажимаете на изображение (элемент $('.owl-carousel')), он срабатывает один раз. Но когда вы нажимаете на любую стрелку, вы запускаете созданное вами событие щелчка, а также событие щелчка библиотеки. Следовательно, он срабатывает дважды. Вам нужно будет определить, на что вы нажимаете, а затем активировать следующий или предыдущий триггер. Дайте мне знать, как вы поживаете. :)   -  person Tiberiuscan    schedule 23.09.2019
comment
Спасибо Tiberiuscan - я это заметил (нажатия клавиш со стрелками тоже работают как надо). Стрелки навигации активируются логическим параметром в соответствии с приведенным выше кодом, поэтому я не уверен, как определить, на что нажимает пользователь, как вы предлагаете (я все еще пытаюсь понять js)   -  person Mike    schedule 23.09.2019
comment
Я посмотрю на это завтра, но если вы прокомментируете свою функцию щелчка, стрелки будут работать? Если это так, то мой первоначальный комментарий доказывает, что проблема связана с привязками кликов.   -  person Tiberiuscan    schedule 24.09.2019
comment
@Tiberiuscan - вы абсолютно правы - закомментировала функцию клика, и стрелки навигации работают как надо. Итак, любая подсказка, что я должен сделать, чтобы оба работали в унисон? Спасибо за вашу помощь.   -  person Mike    schedule 24.09.2019

Ответы (1)


arrow_upward
0
arrow_downward

Когда @Tiberiuscan указал мне правильное направление, я нашел решение:

Щелчок для следующей части изображения был нацелен на всю карусель совы для кликов.

Я изменил этот код, чтобы настроить его на элемент div совы, и это решило проблему, как показано ниже:

      // click for next image
  $('.owl-item').click(function() {
    owl.trigger('next.owl');
  })

Еще раз спасибо, @Tiberiuscan

person Mike    schedule 24.09.2019
comment
Нет проблем @Mike, я вижу, что теперь он работает с вашим кодом. Хороший. - person Tiberiuscan; 24.09.2019