search

metafizzy / flickity

:leaves: Touch, responsive, flickable carousels
https://flickity.metafizzy.co
7.52k stars 605 forks source link

Carousel in iOS #920

Closed zarabz closed 5 years ago

zarabz commented 5 years ago

Hi,

Thank you so much for developing such a fantastic and concise library.

I have this carousel running very well and smooth in Android and chrome. It works perfect until when it comes to iOS where all the cells are aligned to left rather than being distributed across the screen for horizontal swiping. This is a simplified test case: https://codepen.io/zarabz/pen/rRdbvO

An observation which might help narrowing down the problem: on inspection and comparison with Android, I gather that flickity-viewport does not have touch-action property and flickity-slider does not have the transform property in iOS.

I appreciate any help Thank you

desandro commented 5 years ago

Thanks for reporting this issue. Your demo has both HTML init with data-flickity and jQuery init. I've removed the data-flickity and added jQuery js. I'm not seeing this issue with this demo. Can you double check on your side? https://codepen.io/desandro/pen/ad91cb75e021a6f00e06de82d4eb87d3

zarabz commented 5 years ago

Thanks for your help.

In my production code I didn't have the html init, but I managed to figure two things out that resolved my issue:

1) cellAlign: 'center', and contain: true, don't work together with my set up in iOS, work perfectly in android

2) my jquery init didn't work with the set up.

So, eventually this code worked for both android and iOS with no init in jQuery

<div class="main-carousel" data-flickity='{ "imagesLoaded": true, "percentPosition": false, "wrapAround": true, "selectedAttraction": 0.1, "friction": 0.3, "prevNextButtons": false, "pageDots": false }'>