一次点击移动 Owl-Carousel 并导航多张幻灯片答案

【问题标题】：Move Owl-Carousel with navigation multiple slides at a time of click一次点击移动 Owl-Carousel 并导航多张幻灯片
【发布时间】：2017-10-15 14:14:12
【问题描述】：

有什么方法可以通过点击导航来移动 owl carousel 中的多个项目。

在演示中像这样

http://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/demos/custom.html

我希望在导航链接中有一个选项，但我希望在 owl 中有这个选项。

【问题讨论】：

标签： javascript jquery carousel owl-carousel

【解决方案1】：

您应该包含slideBy: [number] 或slideBy: 'page' 选项，正如他们在documentation 中所描述的那样。

$('.owl-carousel').owlCarousel({
  margin: 10,
  nav: true,
  items: 5,
  slideBy: 5
})

.item {
  background: red;
  text-align: center;
}

<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="owl-carousel owl-theme">
  <div class="item">
    <h4>1</h4>
  </div>
  <div class="item">
    <h4>2</h4>
  </div>
  <div class="item">
    <h4>3</h4>
  </div>
  <div class="item">
    <h4>4</h4>
  </div>
  <div class="item">
    <h4>5</h4>
  </div>
  <div class="item">
    <h4>6</h4>
  </div>
  <div class="item">
    <h4>7</h4>
  </div>
  <div class="item">
    <h4>8</h4>
  </div>
  <div class="item">
    <h4>9</h4>
  </div>
  <div class="item">
    <h4>10</h4>
  </div>
  <div class="item">
    <h4>11</h4>
  </div>
  <div class="item">
    <h4>12</h4>
  </div>
</div>

【讨论】：