Open shaunjanssens opened 7 months ago
Any solution on this one? Having the same issue with latest version.
Same issue. transform: translate3d is being applied when slide items count are equal to the slidesToSlide or items property in responsive.
const responsive = {
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 3,
slidesToSlide: 3,
partialVisibilityGutter: 50,
},
...
}
<Carousel
responsive={responsive}
partialVisible={true}
...
>
In the above example, if a carousel has 1, 2, 4, or more items the translate property starts at 0 as expected and is correctly applied when the carousel advances or if there are less than 3 the arrows are correctly hidden and translate is not applied.
If, however, there are 3 items (matching slidesToSlide or items properties) in the carousel a translate value is being applied on render pushing the visible items right to the edge of the container.
Any way to prevent translate from being applied in this case?
Describe the bug When only 2 slides are available and
paritialVisibilityGutter
is used the slides are aligned right instead of left.To Reproduce Steps to reproduce the behavior:
responsive
prop and defineparitialVisibilityGutter
Expected behavior The slides are aligned left instead of right.
Screenshots
Reproduction Link to codesandbox.