Multiple items on Material UI Carousel

Question

I'm using the following Material UI Carousel library and I'm having trouble understanding how can I create multiple items for the carousel.

I have searched in the docs, no solution there, tried to manipulate with CSS by defining width like this:

  .item{
    margin: 0 auto;
    text-align: center;
    width: 30%;
  }

Didn't worked either.

Here is my code:

 function Home() {
  var items = [
    {
        name: "Pizza Begin",
        link: "pizza-begin.co.il",
        image: Begin
    },
    {
        name: "Mia Luz",
        link: "mia-luz.com",
        image: Mia
    },
    {
        name: "Nuda Swim",
        link: "nudaswim.com"
    }
   ];


   return(<>
    <Carousel navButtonsAlwaysInvisible={true} animation="slide" activeIndicatorIconButtonProps={{className: "activeIndicator"}}>
        {
            items.map( (item, i) => <Item key={i} item={item} /> )
        }
    </Carousel>

</>);
}

function Item(props)
{
    return (
        <Paper className="item">
            <img className="imageCarousel" src={props.item.image} alt={props.item.name} />
            <h2 onClick={() => { window.location.href = props.item.link; }}>{props.item.name}</h2>
        </Paper>
    )
}

export default Home;

Right now each slide contains one Item, my goal is to reach 3 items on each slide.

How can I use multiple items in one slide using Material UI Carousel?

Codesandbox

Answer 1

Shalom!
The problem is inside the Carousel component.

I'm new with Material UI, but it seems that every array element gets a "page" on the slider.

So what i've done and it gave me the result you are looking for looks something like this:

    const sliderItems: number = data.length > 3 ? 3 : data.length;
  const items: Array<any> = [];

  for (let i = 0; i < data.length; i += sliderItems) {
    if (i % sliderItems === 0) {
      items.push(
        <Card raised className="Banner" key={i.toString()}>
          <Grid container spacing={0} className="BannerGrid">
            {data.slice(i, i + sliderItems).map((da, index) => {
              return <SubCategory key={index.toString()} item={da} />;
            })}
          </Grid>
        </Card>
      );
    }
  }
  return (
    <Carousel animation="slide" autoPlay={false} cycleNavigation timeout={300}>
      {items}
    </Carousel>
  );
};

I chose 3 items per slider. items array contains array of Cards.