Carousel - arrows as pagination

Asked

Viewed 344 times

1

I’m working with the Owl Carousel v2.2.1 3 images at a time are displayed. This is already possible using paging, but I need the same event to be done using arrows. Every time you click on the arrow you should change the page (the next 3 images appear).

I tried to use the option sliderBy and also scrollPerPage: true, but it didn’t work, just does the loop with the next picture.

Could someone help?

javascript owl-carousel owl

  • If possible post your code to help understand the issue.

1 answer

1


Use the option slideBy (see doc.).

The default value of slideBy is 1, that is, with each click on the arrows, the slide will forward/back 1 item. At set 3, will forward/back of 3 in 3 items.

Example:

$(document).ready(function() {
   var owl = $('.owl-carousel');
   owl.owlCarousel({
      margin: 10,
      nav: true,
      loop: true,
      slideBy: 3
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/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>

  • Thanks for the reply @dvd now managed to use this option.

Browser other questions tagged javascript owl-carousel owl

You are not signed in. Login or sign up in order to post.