如何在猫头鹰旋转木马中滑动所有可见项目，而不是使用上一个/下一个按钮

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

本文关键字：按钮 下一个 上一个 项目 旋转木马 猫头鹰      更新时间：2023-09-26

在最新的owlCarousel v 2.0.0中，我想滑动视口中可见的所有项目，像点导航一样单击上一个/下一个按钮。然而，当循环值为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
      }
    }
  })

在owl-carosel中的滑动选项很方便。它解决了问题。包括以下内容。

更新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
      }
    }
  })
相关文章：