Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slides are aligned right instead of left #415

Open
shaunjanssens opened this issue Nov 17, 2023 · 2 comments
Open

Slides are aligned right instead of left #415

shaunjanssens opened this issue Nov 17, 2023 · 2 comments

Comments

@shaunjanssens
Copy link

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
Screenshot 2023-11-17 at 08 33 24

Reproduction
Link to codesandbox.

@lucasharada
Copy link

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

@nicktrull
Copy link

nicktrull commented May 20, 2024

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}
    ...
>
Screenshot 2024-05-20 at 1 16 28 PM

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants