Is there a way to align carousel items so the gap between all the items would be the same?

[eugenepolyakv]

Describe the bug Is there a way to align carousel items so the gap between all the items would be the same? Currently the default style for carousel is display:flex (note that it's style for UL tag that contains our LI tags a.k.a. items of carousel), so my first thought was just make a gap:20px. But the thing is that slide container doesn't take into account these gaps, so i'm getting overflow, and my last element simply get cut out (not the very last, but the last one which is seen in current slide).

To Reproduce

1. Make a carousel. put into it 5-6 items. Make a responsive object so it fit only 4 items on slide.
2. Create a custom css class for carousel .carouselUL { gap: 20px; }
3. Give it to the carousel object <Carousel responsive={responsive} sliderClass={styles.carouselUL}> {...6 any items} </Carousel>

Expected behavior I expect my carousel slide has the first item( ON THE CURRENT SLIDE! ) to be aligned the very left side of the current slide, the last item ( ON THE CURRENT SLIDE! ) to be aligned the very right side of the current slide. I expect this behavior on every single slide, the gap between every single item should be constant, in case of resizing screen size, items must shrink (so the item size depends on current screen size and gap). Neither first nor last items should overflow and being cutted out (every item should be observable completely). Also i expect everything would work if i did put any other amount of items.

Screenshots I attached a screenshot (current behavior). There are two red lines, they represent the borders of container. I expect these items fit container(as though i'd applied justify-content: space-between). P.S. i know that my last item overflows due to gap existence, but is there any way to make a gap between items, fit them perfectly and item's size would adjusted automatically by its own??

[BumbuKhan]

@eugenepolyakv I had the same issue and ended-up using swiperjs - it has a dedicated spaceBetween prop for that

[samhalsall23]

Faced the same issue.

How I solved it was instead of having padding or a gap inbetween the items, I just wrapped a div around the image and decreased the width and height of the image to 90%.

Therefore the wrapper divs are still touching but the images within aren't.

Code:

      <PrevArrow onClick={() => slider?.current?.previous(1)} />
      <Carousel
        responsive={responsive}
        arrows={false}
        ref={slider}
        infinite
        partialVisible={false}
      >
           <div  style={{display:"flex",  justifyContent:"center",  alignItems:"center" }}>
                <img src={imgSrc} style={{ width: "90%" , height: "90%" }} />
           </div>
           <div  style={{display:"flex",  justifyContent:"center",  alignItems:"center" }}>
                <img src={imgSrc} style={{ width: "90%" , height: "90%" }} />
           </div>
          <div  style={{display:"flex",  justifyContent:"center",  alignItems:"center" }}>
                <img src={imgSrc} style={{ width: "90%" , height: "90%" }} />
           </div>
          <div  style={{display:"flex",  justifyContent:"center",  alignItems:"center" }}>
                <img src={imgSrc} style={{ width: "90%" , height: "90%" }} />
           </div>
      </Carousel>
      <NextArrow onClick={() => slider?.current?.next(1)} />

Result: