Show part of next and previous items with Owl Carousel 2.0
I used half values in the custom code like the above. Hope it helps.
$("#owlCarousel").owlCarousel({
itemsCustom: [
[0, 1],
/* Show half of next item */
[450, 1.5],
[600, 2.5],
[700, 3],
[800, 3],
[1000, 4],
[1200, 4],
[1400, 4],
[1600, 4]
],
lazyLoad: true,
navigation: false,
});
Also if you want to have part of next item only from right side, use as @witrin mentioned:
$('.owl-carousel').owlCarousel({
margin: 10,
loop: true,
items: 1,
stagePadding: 30
});
and also in your style write the css:
.owl-stage{
left:-30
}
Have a good code.
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="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<div class="owl-carousel">
<div class="item"><img src="//placehold.it/350x150&text=1" /></div>
<div class="item"><img src="//placehold.it/350x150&text=2" /></div>
<div class="item"><img src="//placehold.it/350x150&text=3" /></div>
<div class="item"><img src="//placehold.it/350x150&text=4" /></div>
<div class="item"><img src="//placehold.it/350x150&text=5" /></div>
<div class="item"><img src="//placehold.it/350x150&text=6" /></div>
<div class="item"><img src="//placehold.it/350x150&text=7" /></div>
<div class="item"><img src="//placehold.it/350x150&text=8" /></div>
</div>