Блог

Изображение Строк

На приведенном выше рисунке я хочу, чтобы строки бесконечно перемещались влево.

Ниже приведен код компонента:

  <div id={id} className="row__posters">
          {movies.map((movie) => (
            <img
              key={movie.id}
              onClick={() => handleClick(movie)}
              className={`row__poster ${isLargeRow amp;amp; "row__posterLarge"}`}
              src={`${base_url}${
                isLargeRow ? movie.poster_path : movie.backdrop_path
              }`}
              loading="lazy"
              alt={movie.name}
            />
          ))}
        </div>
 

А вот css для кода компонента:

 .row {
  color: white;
  margin-left: 20px;
}
.row__posters {
  display: flex;
  overflow-y: hidden;
  overflow-x: scroll;
  padding: 20px;
}
.row__posters::-webkit-scrollbar {
  display: none;
}

.row__poster {
  max-height: 100px;
  object-fit: contain;
  margin-right: 10px;
  transition: transform 450ms;
}
.row__poster:hover {
  transform: scale(1.08);
  opacity: 1;
}
.row__posterLarge {
  /* overflow-x: scroll; */
  max-height: 250px;
  /* width: calc(250px * 20); */
  animation: scroll 40% linear =infinite;
}
.row__posterLarge:hover {
  transform: scale(1.09);
  opacity: 1;
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 10));
  }
}
 

Я хочу, чтобы в большой строке был бесконечный ползунок автозапуска, а на другие строки это не должно влиять.
Я пытался (https://www.youtube.com/watch?v=3Z780EOzIQs) но ничего не произошло.
Затем я попробовал реагировать-скользкая третья сторона (https://react-slick.neostack.com/docs/example/pause-on-hover) и он только разбил строки, он превратил их в один столбец(выровненный по левому краю).

У вас есть какие-либо идеи о том, как реализовать эту функцию?

Для этого вы можете использовать react-slick. Если вы хотите, чтобы это была бесконечная прокрутка. Вы должны изменить объект настроек. Который вы передаете внутри компонента Слайдера. Добавьте эти два параметра в настройки —

автозапуск: true, скорость воспроизведения: 2000,

чтобы сделать его бесконечным, вы можете использовать прокрутку —

бесконечно: верно,

Вы также должны упомянуть, сколько слайдов нужно показать.

Слайд-шоу: 3, слайд-ролик: 1,

Убедитесь, что эти свойства являются таковыми. И вы импортировали файл css внутри своего компонента.

импорт «слик-карусель/слик/слик.css»; импорт «слик-карусель/слик/слик-тема.css»;