OWL旋转木马移动+/-5张幻灯片

OWL Carousel move + / - 5 slides

本文关键字：-5张 幻灯片 旋转木马 移动 OWL      更新时间：2023-09-26

我希望能够根据当前幻灯片移动OWL Carousel+/-5张幻灯片。请参阅下面的演示，您可以看到我通过使用carousel.trigger('owl.goTo', 5)然后使用carousel.trigger('owl.goTo', 1)返回来完成这一操作。但一旦我上了5张幻灯片，我想再上+5张幻灯片，背部也是如此。它目前只停留在幻灯片上。

代码笔演示

这是我的Javascript

$(document).ready(function () {
var carousel = $("#owl-demo");
carousel.owlCarousel({
  slideSpeed : 500,
  navigation: false
});
$('.goTo').click(function(){
carousel.trigger('owl.goTo', 5)
});
$('.goToback').click(function(){
carousel.trigger('owl.goTo', 1)
});
$('.jumpTo').click(function(){
carousel.trigger('owl.goTo', 10)
});
$('.jumpToBack').click(function(){
carousel.trigger('owl.goTo', 1)
});

});

如果我需要清理，请告诉我

这是OWL Carousel 的网站

您需要获得当前幻灯片并转到currentItem+5（或-5）

https://jsfiddle.net/ubLLx7q9/

$(document).ready(function () {
    var owl = null;
    var carousel = $("#owl-demo");
    carousel.owlCarousel({
      slideSpeed : 500,
      navigation: false,
      afterInit: function () {
        owl = this;
      }
    });
  $('.goTo').click(function(){
    carousel.trigger('owl.goTo', owl.currentItem + 5)
  });
  $('.goToback').click(function(){
    carousel.trigger('owl.goTo', owl.currentItem - 5)
  });
});
相关文章：