如何使用上一个/下一个按钮滑动 Owl Carousel 中的所有可见项目而不是一个答案

【问题标题】：How to Slide all visible items in Owl Carousel instead of one using prev/next button如何使用上一个/下一个按钮滑动 Owl Carousel 中的所有可见项目而不是一个
【发布时间】：2016-04-30 11:14:46
【问题描述】：

在最新的 owlCarousel v 2.0.0 中，我想滑动视口中可见的所有项目，单击上一个/下一个按钮，例如点导航。但是，当循环值为 true 时，我希望 prev/next 按钮具有相同的功能。我已经创建了一支笔：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
      }
    }
  })

【问题讨论】：

标签： javascript jquery css owl-carousel-2

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

【讨论】：