is there any way to control number of items to show per slide in react-multi-carousel?

Question

 <Carousel
      ssr
      infinite={true}
      itemClass="item"
      responsive={responsive}
    >
      {data.map((item) => {
        return (
          <NavLink className='text' to='#'>
          <Card className='card'>
            <Card.Body> <div> <img
            className='image'
            src={item.image}
          /> </div><span >{item.name}</span> </Card.Body>
          </Card>
          </NavLink>         
        );
      })}
    </Carousel>

is there any way to write like itemsToshow = {5} in <Carousel> like we do in react-elastic-carousel? I have npm 18 installed which i think does not supprot react-elastic-carousel.

Answer 1

Those are handled via responsive variable. Look at items key where we can mention how many items to be displayed.

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: 6
        },
        tablet: {
            breakpoint: { max: 1024, min: 464 },
            items: 2
        },
        mobile: {
            breakpoint: { max: 464, min: 0 },
            items: 1
        }
    };