4

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.

enter image description here

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

Thanks guys.

bellabelle
  • 908
  • 7
  • 13
  • Provide some code. read this: [MCVE](https://stackoverflow.com/help/mcve) – Granny Sep 08 '17 at 07:47
  • ah okay I will update my question – bellabelle Sep 08 '17 at 07: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](https://codepen.io/clarklab/pen/ByWjxy?page=1&) – RaidenF Sep 08 '17 at 07: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 Sep 08 '17 at 08: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 Sep 08 '17 at 08:09
  • Yes @Granny you're right, I want to detect the center image then thats the time i can add the `transform scale` – bellabelle Sep 08 '17 at 08:29
  • please help, I'm still searching some relevant from google – bellabelle Sep 08 '17 at 08:39
  • @bellabelle How abou [this](https://stackoverflow.com/questions/28022311/owl-carousel-2-get-src-of-current-slide) if you can get the current source you can add a css style to that slide that adds the `transformscale`? – Granny Sep 08 '17 at 08:44
  • @Granny, it's not working – bellabelle Sep 08 '17 at 08:59
  • @bellabelle What is not working? I believe that question i linked is in Jquery so some pieces of code wont work but you can look for Javascript alternatives. – Granny Sep 08 '17 at 09:02
  • @Granny thank you for the help, I found the answer, I just need the updated version of owl carousel so I can call the active class of the center item. – bellabelle Sep 08 '17 at 09:34
  • @bellabelle Goodjob :) Glad you found the solution :) Have a nice day! – Granny Sep 08 '17 at 09:36

2 Answers2

5

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);
 }
Nitish
  • 513
  • 2
  • 8
  • 17
  • 1
    Sadly not satisfying enough for my needs. This way the element doesn't take up more space and you can't have equal spacing between all of the items. – LukasKroess Oct 23 '20 at 06:57
0

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 }

Gaurav Kumar
  • 115
  • 2
  • 7