Impossible to customize the space between 2 elements

[scayetanot]

Describe the bug I have use your lib and it works super nicely for me. The only issue I have is that I do have overlap on my element when sizing the window. I am interested to make sure that the space between 2 elements remain constant.

To Reproduce The step to reproduce is to enable the carousel and inside each div you can replace the item text by a image. the image size are fixed so when size of the window change, the space between the elements is changed. I assume because of the use of em or rem

Expected behavior it should be good to be able to define the space between items and keep it fixed

Screenshots

Desktop (please complete the following information):

• Chrome
• any Version

[Sahero]

The quick hack can be adding the CSS below:

.react-multi-carousel-item{
    max-width: 230px;
    min-width:230px;
}

200px being the width of the card or the carousel item, 30px is the space between.

[asharma1989]

Hi Guys, I am having the same issue, used the above hack and now the space is constant between elements but since the size of my elements remains constant I see there is an extra blank element space added at the end of my elements grid. Any advice on the same?

[john1625b]

This hack worked for me but I have two carousels, one needs the hack and the other doesn't. How do I only apple the .react-multi-caoursel-item to just one of the carousels in react?

[Sahero]

This hack worked for me but I have two carousels, one needs the hack and the other doesn't. How do I only apple the .react-multi-caoursel-item to just one of the carousels in react?

Use separate itemClass="carousel-item-padding-40-px" for both

[john1625b]

I've noticed that when you apply this hack, the items do not properly cycle from item to item when you click next/previous. I have center mode on but when you click next, the next item will not be centered.

Another issue that comes up is that once you have cycled through all the items, it abruptly jumps back to the first one without a smooth transition.

I think this is because the hack confuses the component because its out of sync with the number of items in the responsive object. Is there any solution to this? thanks.

Without the hack, it cycles properly but the caveat that the items overlap.

[domanskyi]

@john1625b have the same issue

[alejandroc311]

I think I'm having the same issue as @john1625b

When (1) "infinite"and "centerMode" are set to true, (2) you add space via either adjusting the carousel item width or adding margin, and (3) slide from the last item to the first or the from the first to the last ... there will be a jerky/abrupt transition

[jrbruce86]

Running into the same issue (fixing the width breaks the carousel resolution).

[NxRoot]

Create a class for your item

1. Define your max-width and min-width

.carouselItem{
    max-width: 230px;
    min-width: 230px;
}  

Add 2 props to Carousel

1. Use itemClass to use your class
2. Add partialVisible={false} for the carousel to fix itself whenever your items are being cut from view

<Carousel itemClass={styles.carouselItem} partialVisible={false}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</Carousel>

[marcjoancr]

I think the solution should be integrated, something like a prop called "spacing" or "gap" where you specify an integer like spacing={30} for 30px or spacing={'2rem'} if you need something different than "px"

[walidbillel]

I used padding on the carousel item and it solved it. But I agree, this should be a prop on the Carousel that sets the spacing between the items

[sampconrad-obj]

@walidbillel mind sharing how you solved it? Running into the same issue with the jerk animation if setting infinite={true} and defining a max-width and min-width for the carouselItem.

This is what I have for my carousel:

<Carousel
  responsive={responsive}
  arrows={false}
  customButtonGroup={<CustomButtonGroupAsArrows />}
  renderButtonGroupOutside
  containerClass="carousel-container"
  itemClass="carousel-item"
  partialVisible={false}
  infinite={true}
  autoPlay={isMobileDevice ? true : false}
  autoPlaySpeed={2000}
  centerMode={true}
  draggable={true}
  minimumTouchDrag={80}
  pauseOnHover
  focusOnSelect={true}
  slidesToSlide={1}
  rewind={false}
  rewindWithAnimation={false}
  rtl={false}
  shouldResetAutoplay
  swipeable={true}>
    {products.map((product, index) =>
      product.itemTOTVS.map((subproduct) => (
        <CardProdutoSm
          key={index}
          product={product}
          subproduct={subproduct}
        />
      ))
    )}
</Carousel>

And for my css:

.carousel-container {
	padding: 50px;
	z-index: 1000;
}

.carousel-item{
	 max-width: 300px;
         min-width:300px;
}

The card item being mapped into the carousel has a width of 270px, fyi.

[lorenzejay]

@walidbillel mind sharing how you solved it? Running into the same issue with the jerk animation if setting infinite={true} and defining a max-width and min-width for the carouselItem.

This is what I have for my carousel:

<Carousel
  responsive={responsive}
  arrows={false}
  customButtonGroup={<CustomButtonGroupAsArrows />}
  renderButtonGroupOutside
  containerClass="carousel-container"
  itemClass="carousel-item"
  partialVisible={false}
  infinite={true}
  autoPlay={isMobileDevice ? true : false}
  autoPlaySpeed={2000}
  centerMode={true}
  draggable={true}
  minimumTouchDrag={80}
  pauseOnHover
  focusOnSelect={true}
  slidesToSlide={1}
  rewind={false}
  rewindWithAnimation={false}
  rtl={false}
  shouldResetAutoplay
  swipeable={true}>
    {products.map((product, index) =>
      product.itemTOTVS.map((subproduct) => (
        <CardProdutoSm
          key={index}
          product={product}
          subproduct={subproduct}
        />
      ))
    )}
</Carousel>

And for my css:

.carousel-container {
	padding: 50px;
	z-index: 1000;
}

.carousel-item{
	 max-width: 300px;
         min-width:300px;
}

The card item being mapped into the carousel has a width of 270px, fyi.

Were you able to solve this?

[walidbillel]

@sampconrad-obj @lorenzejay Here is the component:

export const CarouselDisplay: FunctionComponent<{
  children: React.ReactNode;
  showCustomButtonGroup?: boolean;
  partialVisible?: boolean;
  canSwipe?: boolean;
}> = ({
  children,
  showCustomButtonGroup,
  partialVisible = false,
  canSwipe = false,
}) => {
  const responsive = {
    desktop: {
      breakpoint: { max: 3000, min: 1024 },
      items: 3,
      paritialVisibilityGutter: partialVisible ? 20 : 0,
      slidesToSlide: 2,
    },
    tablet: {
      breakpoint: { max: 1024, min: 464 },
      items: 2,
      paritialVisibilityGutter: partialVisible ? 20 : 0,
      slidesToSlide: 1,
    },
    mobile: {
      breakpoint: { max: 464, min: 0 },
      items: 1,
      paritialVisibilityGutter: partialVisible ? 20 : 0,
      slideToSlide: 1,
    },
  };
  return (
    <Carousel
      draggable={canSwipe}
      swipeable={canSwipe}
      arrows={showCustomButtonGroup ? false : true}
      renderButtonGroupOutside={true}
      customButtonGroup={showCustomButtonGroup ? <ButtonGroup /> : null}
      className={styles.Carousel}
      responsive={responsive}
      ssr
      partialVisbile={partialVisible}
      renderArrowsWhenDisabled
      itemClass={styles.CarouselItem}
    >
      {children}
    </Carousel>
  );
};

Please remove the paddings from the container and add it to the CarouselItem instead