Блог

Я пытаюсь создать простой div с левой и правой кнопками с каждой стороны, которые могут перемещать содержимое посередине влево и вправо.

Ближайшим примером этого является следующее:

Затем, когда вы нажимаете стрелку вправо, он перемещается на этот экран.

Есть ли React.js плагин, который может это сделать, или любой JavaScript-код с открытым исходным кодом?

В настоящее время мы показываем наши станции следующим образом:

 <Grid item lg={2} md={6} xs={12}>
  <Card onClick={handleClick} className={classes.card}>
    <CardMedia
      component='img'
      className={classes.media}
      image={props.icon}
      title={props.title}
    />
  </Card>
</Grid>
 

Подумайте, что вы ищете для этого. Приведенный ниже код (и рабочий пример по ссылке) создаст «видоискатель». Вы можете использовать this и sub в своих изображениях и компонентах MUI. Я не хотел иметь дело со сторонней библиотекой, чтобы проиллюстрировать суть того, что делает код.

 import * as React from "https://cdn.skypack.dev/react@17.0.1";
import * as ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";

const keanuMovies = [
  "Bill amp; Ted",
  "Bill amp; Ted 2",
  "Bill amp; Ted 3",
  "Dracula",
  "John Wick",
  "Matrix",
  "Matrix 2",
  "Matrix 3",
  "Point Break",
  "Speed"
];

// max number of items to show
const increment = 3;

const App = () => <MovieBrowser />;

const MovieBrowser = () => {
  const [visibleMovies, setVisibleMovies] = React.useState(
    keanuMovies.slice(0, increment)
  );
  const [leftEdge, setLeftEdge] = React.useState(0)
  // as long as we've gone right, we can go back left
  const canGoLeft = leftEdge > 0;
  // basically a "peak ahead" to see if the 
  // next right move will go beyond the array limit
  const canGoRight = leftEdge   increment <= keanuMovies.length - 1;

  const handleGoLeftClick = (goLeft = false) => {
    // if going left will fall blow the 0 index, reset to 0
    // else, decrement 
    const updatedLeftEdge = leftEdge - increment < 0 ? 0 : leftEdge - increment;

    setVisibleMovies(
      keanuMovies.slice(updatedLeftEdge, updatedLeftEdge   increment)
    );
    setLeftEdge(updatedLeftEdge);
  };
  
  const handleGoRightClick = (goLeft = false) => {
    // if going right will go past the array len, select 
    // the next index after the previous move right
    let updatedLeftEdge =
      leftEdge   increment > keanuMovies.length - 1
        ? leftEdge   increment - (keanuMovies.length - 1   increment)
        : leftEdge   increment;

    setVisibleMovies(
      keanuMovies.slice(updatedLeftEdge, updatedLeftEdge   increment)
    );
    setLeftEdge(updatedLeftEdge);
  };

  return (
    <div className="container">
      <h1>Keanu Movies</h1>
      <ul className="movies">
        {visibleMovies.map((movie) => (
          <li>{movie}</li>
        ))}
      </ul>
      <div className="actions">
        <button onClick={handleGoLeftClick} disabled={!canGoLeft}>
          Left
        </button>
        <button onClick={handleGoRightClick} disabled={!canGoRight}>
          Right
        </button>
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));