OWL Carousel move + / - 5 张幻灯片答案

【问题标题】：OWL Carousel move + / - 5 slidesOWL Carousel move + / - 5 张幻灯片
【发布时间】：2015-12-30 17:18:45
【问题描述】：

我希望能够移动 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

【问题讨论】：

标签： javascript jquery owl-carousel

【解决方案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)
  });
});

【讨论】：