I've been utilizing the Material UI Carousel library for my project, but I'm struggling to figure out how to display multiple items on each slide of the carousel.
I checked the documentation but couldn't find a solution. I also tried adjusting CSS properties like setting the width in the following way:
.item{
margin: 0 auto;
text-align: center;
width: 30%;
}However, that didn't work as expected.
Below is a snippet of 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;
Currently, each slide only contains one Item element, but I want to display three items per slide. How can I achieve this using Material UI Carousel?
For more context, you can view the implementation on Codesandbox.