The task is to make the central image the largest, on the sides of it are medium and very extreme small - fish eye, so to speak.

$(document).ready(function ($) { var cssSmall = { width: 100, marginTop: 75 }; var cssMedium = { width: 250, marginTop: 35 }; var cssLarge = { width: 400, marginTop: 0 }; $('.owl-carousel').on('translate.owl.carousel', function(e){ idx = e.item.index; $('.owl-item').eq(idx-2).css(cssSmall); $('.owl-item').eq(idx+2).css(cssSmall); $('.owl-item').eq(idx-1).css(cssMedium); $('.owl-item').eq(idx+1).css(cssMedium); $('.owl-item').eq(idx).css(cssLarge); }); $('.owl-carousel').owlCarousel({ nav:true, navText: ["предыдущая", "следующая"], items: 5, loop: true, startPosition: 3, margin: 10, center:true, dots: false, }); })

I tried to do this, but with loop: true, some nonsense is obtained, the images are superimposed on each other. I wish there was this http://coolcarousels.frebsite.nl/c/17/

    1 answer 1

    Most likely you forgot to connect the main CSS and the theme without them will be a mess. Good luck.