1

I using OwlCarousel 2.3.4 and want to use slideBy option to slide items by 2, but this future only work with dots or nav not slide or mouse drag. What I trying to achieve is, slide carousel by 2 items when you touch or drag, but it only work when you click on arrow or dots. How can I do this?

$(".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>
Jack The Baker
  • 1,781
  • 1
  • 20
  • 51

1 Answers1

-1

I think you want when click next button you want to go next page. If i am right, you can add ;

slideBy: "page"
Ismet Alp Kahveci
  • 1
  • 1