个性化阅读
专注于IT技术分析

Owl轮播-使用上一个/下一个跳过过去的图像

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

如果有帮助, 很高兴分享代码的其他任何部分。在此先感谢你的指导!


#1


通过@Tiberiuscan指向正确的方向, 我找到了解决方案:

下一个图像部分的点击以整个猫头鹰传送带为点击目标。

我修改了此代码以将owl-item div作为目标, 并解决了该问题, 如下所示:

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

再次感谢@Tiberiuscan

赞(0)
未经允许不得转载:srcmini » Owl轮播-使用上一个/下一个跳过过去的图像

评论 抢沙发

评论前必须登录!