Search code examples
jquerycssowl-carousel-2

How to enlarge the image that is in the center (owl-carousel)

I'd like to do something easy I think with owl-carousel2, but unfortunately I can't do it. It is a question of enlarging the image which is in the center each time. I can't find the parameter to add or I tried playing with owl-carousel classes (owl-item active center). Even with that, I can't get what I want. Initially all the images have the same size, I want to be able to redefine this size when it passes in the middle .

Here's my js: 

$('.owl-carousel').owlCarousel({
  items : 5,
  center: true,
  loop:true,
  nav:true,
  slideBy: 1,
  nav: true,
  rewind: false,
  navSpeed: 200,
  autoplay: true,
  autoplayTimeout: 7000
})

Here is an example : enter image description here

And here is my complete code (html, css..) : https://jsfiddle.net/MathF/m1knrhd0/14/

Solution

  • Looks like a duplicate of this question: How do I add classes to items in Owl Carousel 2?

    Once you've got the classes in there you can use CSS to size the images.