如何使用 prev/next 按钮滑动 Owl 轮播中的所有可见项目而不是一个

Question

在最新的 owlCarousel v 2.0.0 中，我想滑动视口中可见的所有项目，单击 prev/next 按钮，例如点导航。但是，我希望在 prev/next 按钮中具有相同的功能，而循环值为 true。我已经创建了一个笔：Codepen 请查看。使用可用选项的任何帮助都会有很大帮助。

HTML:

  <div class="owl-carousel">
        <div class="item">
          <h2>Swipe</h2>
        </div>
        <div class="item">
          <h2>Drag</h2>
        </div>
        <div class="item">
          <h2>Responsive</h2>
        </div>
        <div class="item">
          <h2>CSS3</h2>
        </div>
        <div class="item">
          <h2>Fast</h2>
        </div>
        <div class="item">
          <h2>Easy</h2>
        </div>
        <div class="item">
          <h2>Free</h2>
        </div>
        <div class="item">
          <h2>Upgradable</h2>
        </div>
        <div class="item">
          <h2>Tons of options</h2>
        </div>
        <div class="item">
          <h2>Infinity</h2>
        </div>
        <div class="item">
          <h2>Auto Width</h2>
        </div>
      </div>

JS:

var owl = $('.owl-carousel');
  owl.owlCarousel({
    margin: 10,
    loop: true,
      dots:true,
      nav:true,
      navRewind:true,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 2
      },
      1000: {
        items: 3
      }
    }
  })

Answer 1

owl carosel 中的 slideBy 选项很方便。它解决了问题。包含如下。

更新 JS：

var owl = $('.owl-carousel');
      owl.owlCarousel({
        margin: 10,
        loop: true,
          dots:true,
          nav:true,
      navRewind:true,

    responsive: {
      0: {
        items: 1,
          slideBy: 1          
      },
      600: {
        items: 2,
          slideBy: 2
      },
      1000: {
        items: 5,
          slideBy: 5
      }
    }
  })

如何使用 prev/next 按钮滑动 Owl 轮播中的所有可见项目而不是一个

How to Slide all visible items in Owl Carousel instead of one using prev/next button

javascript

css

jquery

owl-carousel-2