I want to make image in the center item more bigger or larger than the rest items visible. I am using Owl Carousel js.

See below screenshot on how it looks like.

This is my fiddle /, make item at the center bigger.

Thanks guys.

I want to make image in the center item more bigger or larger than the rest items visible. I am using Owl Carousel js.

See below screenshot on how it looks like.

This is my fiddle https://jsfiddle/kwowkfuy/, make item at the center bigger.

Thanks guys.

• javascript
• owl-carousel

• Provide some code. read this: MCVE – Granny Commented Sep 8, 2017 at 7:47
• ah okay I will update my question – bellabelle Commented Sep 8, 2017 at 7:48
• 2 What have you tried? You can add a :hover pseudoclass class with transform: scale(2, 2); to make it bigger. Maybe check out this codepen – RaidenF Commented Sep 8, 2017 at 7:48
• 2 @bellabelle I'm not sure but i believe you need something that detects wich image is in the center of the screen. As i am not that advanced into javascript I can only try to help by googleling stuff :) – Granny Commented Sep 8, 2017 at 8:06
• @bellabelle Im not sure if K. Gkinis's awnser is what you are looking for but that code can of course be copied over and adjusted to your liking. – Granny Commented Sep 8, 2017 at 8:09

2 Answers 2

Make center: true in owlCarousel configuration.

Now the center class will automatically be added to the centered item.

You can set CSS properties to make bigger.

.owl-item.active.center {
       transform: scale(1.1, 1.2);
 }

Add Center true in owl configuration settings

However this will mess with spacing between elements, Hence also add in your css.

owl-item.center { display: block }