Question

我希望能够移动OWL Carousel + / - 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 Carousel移动+ / - 5张幻灯片

1 个答案: