`slidesToScroll: 'auto'` isn't compatible with margins or gap slide spacings - Githubissues

davidjerleke / embla-carousel

A lightweight carousel library with fluid motion and great swipe precision.

https://www.embla-carousel.com

MIT License

5.4k stars 166 forks source link

`slidesToScroll: 'auto'` isn't compatible with margins or gap slide spacings #536

Closed davidjerleke closed 11 months ago

davidjerleke commented 11 months ago

Bug is related to

[x] embla-carousel (core package)

Embla Carousel version

v7.0.0 and up to the latest v8.0.0-rc11

Describe the bug

When slide spacings are set with the CSS gap or margin property, slidesToScroll: 'auto' fails to group slides automatically based on their size.

CodeSandbox

The link to a CodeSandbox that demonstrates the bug clearly.

Steps to reproduce

Go to the sandbox.
Swipe to slide 3 and forward until the end.
Slide [3, 4], [5, 6] should be grouped together but slide 3, 4, 5 and 6 aren't grouped with any other slide.

Expected behavior

When slide spacings are set with the CSS gap property or margin properties, slidesToScroll: 'auto' should group slides correctly. In the sandbox example, slides should be grouped as follows: [1, 2], [3, 4], [5, 6], [7, 8].