Slides are aligned right instead of left

[shaunjanssens]

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:

1. Create a slider with 2 slides
2. Use responsive prop and define paritialVisibilityGutter

Expected behavior
The slides are aligned left instead of right.

Screenshots

Reproduction
Link to codesandbox.

[lucasharada]

Any solution on this one? Having the same issue with latest version.

[nicktrull]

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?

[chandrapandia]

In that Scenario change the

partialVisibilityGutter: 0/10/20, value adjust this value.