React + Material-UI | How to create horizontal scroll cards?

Question

I'm attempting to create a react component that will display 3 cards, each containing some information from an array horizontally. There would be left/right buttons allowing the user to scroll back and forth horizontally to 3 more cards until the array is completed.

I've been doing some research and have had a really difficult time finding a solution to complete this task easily. This is my first time using Material-UI so this is all quite new.

What can I do to obtain what I'm looking for? Is there some sort of scroll feature I can give to material-UI to easily create these left/right scroll buttons?

Thanks!

example:

Answer 1

Do you need the buttons, or just the horizontal scroll? This is a simple example of horizontal scroll section with images:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import GridListTileBar from '@material-ui/core/GridListTileBar';

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
    overflow: 'hidden',
  },
  gridList: {
    flexWrap: 'nowrap'
  }
}));

const tileData = [
{
  img: 'images/image1.jpg',
  title: 'title'
},
{
  img: 'images/image2.jpg',
  title: 'title'
},
{
  img: 'images/image3.jpg',
  title: 'title'
}
];

export default function SingleLineGridList() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <GridList className={classes.gridList} cols={2.5}>
        {tileData.map((tile) => (
          <GridListTile key={tile.img}>
            <img src={tile.img} alt={tile.title} />            
            <GridListTileBar
              title={tile.title}
            />
          </GridListTile>
        ))}
      </GridList>
    </div>
  );
}

I think for the buttons you would need to set a <div> for each section of 3, and set the href=#id on each button.

Answer 2

You can use below code to get it done. I have used some CSS properties to make it work. This will remove the additional usage of arrows to scroll horizontally.

I have used this in a Netflix clone app. This is a Row Component. I have used it in my Home page and passed different genre of movie list to it. Based on the genre it will show different movies in a row.

 <div className="row">
  {/* title */}
  <h2>{title}</h2>
  {/* container -> posters */}
  <div className="row__posters">
    {/* several row posters */}
    {movies.map((movie) => (
      <img
        key={movie.id}            
        className="row__poster row__posterLarge"
        src={`${image_base_url}${
          isLargeRow ? movie.poster_path : movie.backdrop_path
        }`}
        alt={movie.name}
      />
    ))}
  </div>
</div>

Below is the CSS used for above component.

.row {
  margin-left: 20px;
  color: white;
}

.row__posters {
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  padding: 20px;
}

.row__posters::-webkit-scrollbar {
  display: none;
}

.row__poster {
  width: 100%;
  object-fit: contain;
  max-height: 100px;
  margin-right: 10px;
  transition: transform 450ms;
}

.row__posterLarge {
  max-height: 250px;
}

.row__posterLarge:hover {
  transform: scale(1.09);
}

.row__poster:hover {
  transform: scale(1.08);
}

Answer 3

Maybe you can try using a library like this one:

react-material-ui-carousel

Instead of putting images in this component, try putting cards instead.