Owl Carousel - Прескача минали изображения с помощта на Prev / Next

Нашият персонализиран Owl Carousel не се държи според очакванията – докато плъзгате и използвате стрелките на клавиатурата ви отвеждат до следващия слайд, предишната и следващата стрелка прескачат „през“ следващия слайд към следващия.

Следващият слайд се появява за кратко, но бързо прелиства към следващия слайд.

Опитах няколко неща в настройките на 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 към owl-item и това разреши проблема, както е показано по-долу:

      // 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