На сайте есть некоторая Owl Carousel 2.
HTML:
<div class="owl-carousel owl-theme">
<div><img src="images/full_pic_1.png" alt="picture"/></div>
<div><img src="images/full_pic_2.png" alt="picture"/></div>
<div><img src="images/full_pic_3.png" alt="picture"/></div>
<div><img src="images/full_pic_4.png" alt="picture"/></div>
<div><img src="images/full_pic_5.png" alt="picture"/></div>
<div><img src="images/full_pic_6.png" alt="picture"/></div>
</div>
JQuery:
$(function() {
// Owl Carousel
let owl = $(".owl-carousel");
owl.owlCarousel({
center: true,
items: 3,
slideBy: 1,
nav: true,
navText: ["",""],
loop: true,
stagePadding: 80,
pullDrag: true,
margin: 300,
autoWidth: true,
autoHeight: false,
responsive:{
600:{
items:1
}
}
});
})
В данном случае конечный результат выглядят как-то так:
Необходимо же добиться вот такого эффекта:
Слайд, который расположен по центру - всегда большего размера, те что по бокам - всегда меньшего. Боковые слайды так и должный частично уходить за пределы блока.