I'm working with the Owl Carousel v2.2.1 and need to display 3 images at a time. This is already possible using pagination, but I need the same event to be done using the arrows. Every time you click the arrow you should change the page (the next 3 images will appear).
I tried to use the option sliderBy and also scrollPerPage: true , but it did not work, just loop with the next image.
Could someone help?
Use the 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. By setting 3 , it will move forward / back from 3 to 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><linkrel="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><divclass="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>