Show part of next and previous items with Owl Carousel 2.0

Question

The easiest way to do this is by using stagePadding. Demo below:

$(function() {
  $('.owl-carousel').owlCarousel({
    margin: 10,
    loop: true,
    items: 1,
    stagePadding: 100
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

<div class="owl-carousel">
  <div class="item"><img src="https://placehold.it/350x150&text=1" /></div>
  <div class="item"><img src="https://placehold.it/350x150&text=2" /></div>
  <div class="item"><img src="https://placehold.it/350x150&text=3" /></div>
  <div class="item"><img src="https://placehold.it/350x150&text=4" /></div>
  <div class="item"><img src="https://placehold.it/350x150&text=5" /></div>
  <div class="item"><img src="https://placehold.it/350x150&text=6" /></div>
  <div class="item"><img src="https://placehold.it/350x150&text=7" /></div>
  <div class="item"><img src="https://placehold.it/350x150&text=8" /></div>
</div>

Leave a Comment Cancel reply