search

rcbyr / keen-slider

The HTML touch slider carousel with the most native feeling you will get.
https://keen-slider.io/
MIT License
4.61k stars 211 forks source link

Flexbox/CSS grid breaking functionality? #313

Open Fergie77 opened 1 year ago

Fergie77 commented 1 year ago

Been having some issues whenever I put a slider inside a layout div to put text off to the side, using either flexbox or CSS grid. The whole page seems to scroll? Only seems to happen with a trackpad on a laptop. Also the images clip in almost like they're lazy loading but I don't think I have it set to that

https://hanson-of-sonoma.webflow.io/slider-issue

jamesli2021 commented 1 year ago

Are there error you need to resolve?

TypeError: document.querySelector(...) is null
Fergie77 commented 1 year ago

Are there error you need to resolve?

TypeError: document.querySelector(...) is null

Yea just fixed that there but it wasn't what's causing the problem, at least I don't think so?

Fergie77 commented 1 year ago

It seems like using flexbox or grid almost always breaks the slider, even if its a parent element of the slider itself

Fergie77 commented 1 year ago

@rcbyr Any ideas what this could be?

Fergie77 commented 1 year ago

If anyone else has come across this issue, I solved it by using column elements rather than flexbox/css grid to position everything

kbachl commented 1 year ago

@Fergie77 can you please give more details?

Im currently having a pain with the slider as that on iOS devices the first tap to any element below the slider is ignored. If I tap anywhere on the page before it works however. Removing the slider js initialization code immediately resolves this issue, yet we need the slider