search

YIZHUANG / react-multi-carousel

A lightweight production-ready Carousel that rocks supports multiple items and server-side rendering with no dependency. Bundle size 2kb.
MIT License
1.25k stars 286 forks source link

Can getItemClientSideWidth return a float instead of a integer? #393

Open mlane opened 1 year ago

mlane commented 1 year ago

Describe the bug First just wanted to thank you for an amazing carousel :)

The only issue I've had is the carousel being used in a grid with the grid items have dynamic widths. I'll share some screenshots below.

It looks something like this:

<Grid>
  <GridItem>
    <Carousel />
  </GridItem>
  <GridItem>
    <Carousel />
  </GridItem>
  <GridItem>
    <Carousel />
  </GridItem>
  <GridItem>
    <Carousel />
  </GridItem>
</Grid>

The carousel slides are images with object-fit: cover.

The GridItem might have a float width (e.g. 160.4) Carousel would then have a width of 160 due to the Math.round in getItemClientSideWidth

I only ask because the next slide is a bit noticeable if the GridItem width is a float.

To Reproduce Steps to reproduce the behavior: I'd be happy to create a demo if needed.

Expected behavior Maybe an option for disable Math.round.

Screenshots

Parent element with a width of 286.4px: Screen Shot 2023-05-23 at 1 10 08 PM

Carousel slide with a width of 286px: Screen Shot 2023-05-23 at 1 10 52 PM

Additional context I'd be happy to help implement this. Just let me know.

Reproduction You should be able to replicate my setting the parent element width to a float (e.g. 286.4px).

You can easily reproduce this here and browser width is 1280px: https://www.travelpass.com/results?adults=2&arrival=2023-05-26&departure=2023-05-27&latitude=36.91705&location=Lake+Powell+Utah+United+States&longitude=-111.45734&sort=DISTANCE