react multi carousel only showing one element per slide

Question

I am using the react multi carousel library to display some divs. The code seems to be working in theory as you see below:

import * as React from "react";
import "../styles/Home.css";
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: 5
    },
    tablet: {
      breakpoint: { max: 1024, min: 464 },
      items: 5
    },
    mobile: {
      breakpoint: { max: 464, min: 0 },
      items: 5
    }
  };

const IndicatorCarousel = () => {
  return (
    <div className="IndicatorCarousel">
        <div className="IndicatorCarouselText">
            Select your preferred stock indicators
        </div>
        <br></br>
        <Carousel 
            swipeable={false}
            draggable={false}
            showDots={true}
            responsive={responsive}
            ssr={true} // means to render carousel on server-side.
            infinite={true}
            autoPlaySpeed={1000}
            keyBoardControl={true}
            customTransition="all .5"
            transitionDuration={500}
            containerClass="carousel-container"
            removeArrowOnDeviceType={["tablet", "mobile"]}
            dotListClass="custom-dot-list-style"
            itemClass="carousel-item-padding-40-px"
        >
            <div className="IndicatorCarouselCard">
                Test
            </div>
            <div className="IndicatorCarouselCard">
                Test2
            </div>
            <div className="IndicatorCarouselCard">
                test3
            </div>
            <div className="IndicatorCarouselCard">
                test4
            </div>
            <div className="IndicatorCarouselCard">
                test5
            </div>
        </Carousel>
    </div>
  );
};

export default IndicatorCarousel;

However, when I render the carousel in my browser, it only shows three sections with a singular div in each section and is able to be navigated using the dots and arrows. Instead, I would like to display all three sections at the same time and move along the carousel using the arrows.

Does anybody see something wrong in my code?

Let me know.

Current situation:

Answer 1

Try setting the centerMode property to true on the Carousel component.

    <Carousel 
       ...
       centerMode={true}
       ...
    >

Alternatively you could try setting partialVisible to true