flickity icon indicating copy to clipboard operation
flickity copied to clipboard

Flexbox

Open ntbrown opened this issue 5 years ago • 4 comments

Per old issues flexbox support isn't great given the absolute positioning the slder relies upon.

So, what is the equivalent for certain use cases if they are even achievable. How would I achieve a slider where I can have say 2, 3, etc slides spaced between equally (flexbox equivalent) .

I see the margin, but this isn't responsive and doesn't really achieve what you'd want.

ntbrown avatar Aug 08 '19 15:08 ntbrown

I'm wondering the same thing

mttindustries avatar Aug 16 '19 07:08 mttindustries

I had to drop flickity entirely for Swiper. https://idangero.us/swiper/demos/110-slides-per-view.html Too many issues to get something basic to work.

denisinla avatar Aug 22 '19 19:08 denisinla

Thank you. I'll look at Swiper for the next project. It looks a little bit clunkier than flickity and I can't be bothered spending more time on this slider again. It would be nice for flickerty to work with flexbox so then the carousal can still look neat and tidy for no javascript browsers. At the moment I can do this with display: inline-block and text align center the parent but that makes the slides run a little slow.

mttindustries avatar Aug 23 '19 02:08 mttindustries

@mttindustries while I'm also on the "please someone figure out how to give Flickity first-class Flexbox support; it's above my head" train, if you're just looking for

flexbox ... for no javascript browsers

The wrapping/outer element will only receive the class flickity-enabled after Flickity is initialized (and therefore JS is working). You could use the absence of that class to style the element and its children with the "not()" pseudo-class, e.g. .carousel:not(.flickity-enabled) { display: flex; ... }.

kbav avatar Oct 06 '19 11:10 kbav