search

kenwheeler / slick

the last carousel you'll ever need
kenwheeler.github.io/slick
MIT License
28.52k stars 5.88k forks source link

Carousel centred item enlarged but shrinks when another item is hovered over? #3471

Open moymadethis opened 6 years ago

moymadethis commented 6 years ago

Hi there,

I know this isn't an issue per se but I wonder if this functionality is possible at all. I have a carousel that displays 3 items by default. In my Photoshop mockup I have the middle item enlarged slightly. I can achieve this effect ok using the slick-center class but now i'm wondering if it's possible so when one of the other items is interacted (hovered) with that will then enlarge and the middle item will return to the normal (smaller) size?

Do you know of a way this is possible or would it required a custom bit of Javascript?

I know it's only a minor thing, I just think it'd work quite well!

I did think I could reduce all the sizes when the entire carousel is hovered over and then enlarge the actually item that the mouse is over but that was a bit jumpy and wasn't very graceful.

Thanks and keep up the good work! Hope you can point me in the right direction! :)

CodePen: https://codepen.io/moy/pen/GGNEza

moymadethis commented 6 years ago

As an aside and probably more of an issue. I've noticed if I remove 2 of the items in the carousel (so there's only 3) the middle item doesn't have the class of slick-center and the items either side of it do. Have I mucked something up?

Also if there's only one item (which there shouldn't ever be) it's aligned to the right not centred?

Thanks again and hope you can shed some light on this. Ditched the original issue as I'm not sure I'm keen on the effect in this instance! :)