Owl Carousel - 使用 Prev / Next 跳过过去的图像答案

【问题标题】：Owl Carousel - Skips Past Images using Prev / NextOwl Carousel - 使用 Prev / Next 跳过过去的图像
【发布时间】：2019-09-23 13:54:04
【问题描述】：

我们的自定义 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

如果有用的话，很高兴分享代码的任何其他部分。提前感谢您的任何指导！

【问题讨论】：

我认为正在发生的事情是触发了两个点击事件。请注意，当您单击图像（$('.owl-carousel') elem）时，它会触发一次。但是，当您单击任一箭头时，您将触发您创建的单击事件以及库的单击事件。因此它会触发两次。您需要定义您点击的内容，然后触发下一个或上一个触发器。让我知道你是怎么办的。 :)
感谢 Tiberiuscan - 我注意到了（箭头键也可以正常工作）。根据上面的代码，导航箭头由布尔设置激活，所以我不确定如何像你建议的那样定义用户点击的内容（我仍在尝试围绕 js）
我明天会看看它，但如果你要注释掉你的点击功能，箭头是否有效？如果是这样，那么我最初的评论证明问题与点击绑定有关。
@Tiberiuscan - 你是对的 - 注释掉了点击功能，导航箭头正常工作。那么有什么线索可以让两者协同工作吗？感谢您的帮助。

标签： javascript slider wordpress-theming owl-carousel

【解决方案1】：

@Tiberiuscan 为我指明了正确的方向，我想出了一个解决方案：

点击下一张图片部分是针对整个猫头鹰轮播进行点击。

我修改了此代码以针对 owl-item div 并解决了该问题，如下所示：

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

再次感谢@Tiberiuscan

【讨论】：

没问题@Mike，我可以看到它现在可以与您的代码一起使用。不错。