score:0

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.

score:0

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);
}

score:0

i can't share the full code because it's mixed a lot with other code that is not related to this question, but here is something similar that i can share:

import react, { usestate } from "react";
import { makestyles } from "@material-ui/core/styles";
import chip from "@material-ui/core/chip";
import box from "@material-ui/core/box";
import tabs from "@material-ui/core/tabs";
import iconbutton from "@material-ui/core/iconbutton";
import styled from "@emotion/styled";
import chevronlefticon from "@material-ui/icons/chevronleftrounded";
import chevronrighticon from "@material-ui/icons/chevronrightrounded";

const styledchip = styled(chip)`
  border-radius: 16px;
  text-transform: capitalize;
  color: ${(props) => (props.selected ? "#ffffff" : "#6877ae")};
  background-color: ${(props) => (props.selected ? "#03194f" : "#ffffff")};
  border: 4px solid ${"#03194f"};
  border-color: ${(props) =>
    props.selected ? "#03194f" : "rgba(0, 83, 229, 0.12)"};

  .muichip-root&:hover {
    background-color: ${(props) => (props.selected ? "#03194f" : "")};
  }
`;

const stylediconbutton = styled(iconbutton)`
  left: ${(props) => (props.isleft ? "0" : "none")};
  right: ${(props) => (props.isleft ? "none" : "0")};

  height: 32px;
  width: 32px;
  position: absolute;
  border-radius: 16px;
  border: 1px solid gray;
  //top: 33%;
  background-color: white;
  color: rgba(0, 83, 229, 1);
  border-color: rgba(0, 83, 229, 0.12);

  z-index: 1;
  opacity: 1;
  margin: 20px;

  :hover {
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
      0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12);
    border-color: white;
    background-color: inherit;
  }
`;

const usestyles = makestyles((theme) => ({
  root: {
    display: "flex",
    justifycontent: "center",
    flexwrap: "nowrap",
    liststyle: "none",
    padding: theme.spacing(0.5),
    margin: 0,
    overflow: "auto",
    maxwidth: "100%"
  },
  chip: {
    margin: theme.spacing(2)
  }
}));

export default function chipsarray() {
  const classes = usestyles();
  const [chipdata, setchipdata] = react.usestate([
    { key: 0, label: "angular" },
    { key: 1, label: "jquery" },
    { key: 2, label: "polymer" },
    { key: 3, label: "react" },
    { key: 4, label: "vue" },
    { key: 5, label: "knockout" },
    { key: 6, label: "ember" },
    { key: 7, label: "d3" },
    { key: 8, label: "google charts" },
    { key: 9, label: "c+" },
    { key: 10, label: "c++" },
    { key: 11, label: "nodejs" }
  ]);

  const [selectedindustryfilter, setselectedindustryfilter] = react.usestate(
    "angular"
  );

  return (
    <box classname={classes.root}>
      <tabs
        variant="scrollable"
        scrollbuttons="on"
        aria-label="scrollable auto tabs example"
        scrollbuttoncomponent={(props) => {
          if (props.direction === "left") {
            return (
              <stylediconbutton isleft {...props}>
                <chevronlefticon />
              </stylediconbutton>
            );
          } else if (props.direction === "right") {
            return (
              <stylediconbutton {...props}>
                <chevronrighticon />
              </stylediconbutton>
            );
          } else {
            return null;
          }
        }}
      >
        {chipdata.map((data) => {
          return (
            <styledchip
              label={data.label}
              onclick={() => {
                setselectedindustryfilter(data.label);
                console.log(data.label);
              }}
              selected={data.label === selectedindustryfilter}
              key={data.key}
              classname={classes.chip}
            />
          );
        })}
      </tabs>
    </box>
  );
}

also check it here: https://codesandbox.io/s/demo-material-ui-chips-single-line-with-scroll-forked-2f0z30?file=/src/app.js

score:1

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.


Related Query

More Query from same tag