I am attempting to design a material ui carousel that shows 3 items in one row, even when the browser window is resized. I want the excess items to be hidden instead of being stacked below.
Here is how it looks on full screen:
https://i.stack.imgur.com/ruYPj.png
This is my desired layout:
https://i.stack.imgur.com/8ywFL.png
However, this is what I currently have:
https://i.stack.imgur.com/h0gq5.png
Can you help me identify any issues with my code? Here is the snippet:
<Paper variant="outlined" className={classes.paper}>
<Grid
container
spacing={2}
className={classes.grid}
alignItems="center"
justify="center"
>
...
<Box display="flex" alignItems="center" className={classes.box}>
<Grid item xs="auto" className={classes.arrow}>
...Left Arrow...
</Grid>
<Grid item>
<Grid
container
spacing={2}
className={classes.grid}
alignItems="center"
justify="center"
>
<Grid item xs="auto">
<UserCard content={users[index]} />
</Grid>
<Hidden xsDown>
<Grid item xs="auto">
<UserCard content={users[index + 1]} />
</Grid>
</Hidden>
<Hidden smDown>
<Grid item xs="auto">
<UserCard content={users[index + 2]} />
</Grid>
</Hidden>
</Grid>
</Grid>
<Grid item xs="auto" className={classes.arrow}>
...Right Arrow...
</Grid>
</Box>
</Grid>
</Paper>
Styles
const useStyles = makeStyles((theme) => ({
paper: {
display: "flex",
width: "auto",
},
grid: {
width: "auto",
},
arrow: {
padding: theme.spacing(3),
},
box: {
padding: theme.spacing(3),
},
}));