OWL 轮播移动 +/- 5 个幻灯片

Question

我希望能够移动 OWL 旋转木马 +/- 5 张幻灯片，具体取决于它所在的当前幻灯片。请在下面查看我的演示，您可以看到我通过使用 carousel.trigger('owl.goTo', 5) 然后 carousel.trigger('owl.goTo', 1) 返回来完成此操作。但是一旦我在 5 上，我想再次进行 +5 幻灯片，与返回相同。目前只停留在幻灯片上。

Code Pen Demo

这是我的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

Answer 1

您需要获取当前幻灯片并转到 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)
  });
});

OWL 轮播移动 +/- 5 个幻灯片

OWL Carousel move + / - 5 slides

javascript

jquery

owl-carousel