Question

我使用的是OwlCarousel 2.3.4，并且希望使用slideBy选项将项目滑动2，但是这种将来仅适用于点或导航，不能滑动或鼠标拖动。我想要达到的目的是，当您触摸或拖动时，将轮播设备滑动2个项目，但是仅当您单击箭头或点时，它才起作用。我该怎么办？

$(".owl-carousel").owlCarousel({
  loop: true,
  nav: true,
  touchDrag: true,
  mouseDrag: true,
  items: 2,
  slideBy: 2,
  margin: 10
});

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
  font-size: 100px!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css" />

<div id="demos">
  <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>
</div>

Answer 1

我想您想在单击下一步按钮时转到下一页。如果我对，您可以添加;

slideBy: "page"

OwlCarousel 2 slide通过触摸和鼠标拖动不起作用

1 个答案: