search

rcbyr / keen-slider

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

Slider breaks when inside container with flex-grow #387

Open MR-Mostafa opened 7 months ago

MR-Mostafa commented 7 months ago

Hi The slider breaks in containers where flex-grow is set to 1. In this case, this bug relates to #227 and #229.

Your solution

adding overflow: hidden; to your wrapper (.main) will fix the width calculation.

However, does not work when we use special slider configurations like perView: 3 Also I used slider.update({ slides: { perView: 3, spacing: 15 }}); but dosen't work correctly;

https://stackblitz.com/edit/keen-slider-flex-bug

MR-Mostafa commented 7 months ago

In addition, I cannot assign class overflow-hidden to a parent element. (flex-auto). However, I have given this class's overflow-hidden to its direct parent.

MR-Mostafa commented 7 months ago

also when i used overflow-hidden for flex-auto, It seems that there is another bug and that is calculates the number of slide items incorrectly.

update for calculate pagination:

(This bug occers when loop:false)

welschmoor commented 6 months ago

I have made the experience that keen-slider does not work well with tailwind. I remember I wanted to make the "div" that had the keen slider ref on it be relative and used the tailwind class relative and it did not work. Then I wrapped the slider with a relative div and it did not work. This was React and what worked is using style={{ position: "relative" }}. This may only affect React. top-2 left-4 did not work either, I had to use the style property.

chimok commented 4 months ago

@welschmoor The keen-slider.io website use tailwind. Problem is a container with flex or padding.