2

I'm trying to use the react-multi-carousel library to construct a responsive carousel with fixed size items. I want to fix the spacing between the items as well. However, with react-multi-carousel, the space between items depends on the number of items to be displayed (specified in "responsive"). Is there a way to make the carousel responsive with the space between the elements being the input rather than number of elements? i.e I want to show fixed size elements with 32 px space between them on 1024 devices(16 px in smaller device) and don't care how many items are displayed.

import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
const responsive = {
  superLargeDesktop: {
    // the naming can be any, depends on you.
    breakpoint: { max: 4000, min: 3000 },
    items: 5
  },
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 3
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 2
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 1
  }
};
<Carousel responsive={responsive}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</Carousel>;

The problem with this approach is the space between 2 items becomes very large and looks strange. I would rather fix the space and adjust the items based on that. One workaround I thought of doing was calculating the number of items based on the screen width whenever the window resizes. i.e

    breakpoint: { max: 4000, min: 3000 },
    items: window.innerWidth/WidthOfItemPlusMargin

I have to listen to window resize events for this. Is there a better way?

user1968919
  • 153
  • 3
  • 13

1 Answers1

0

Create a class for your item

.carouselItem{
    padding-right: 40px
}

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>
Kuza Grave
  • 1,256
  • 14
  • 15