Rows Image

In the above picture, I want the rows to move to the left infinitely.

Below is the component code:

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

And here is the css for the component code:

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

I want the large row to have an infinite autoplay slider and the other rows shouldn't be affected. I tried (https://www.youtube.com/watch?v=3Z780EOzIQs) but nothing happened. Then I tried react-slick third party (https://react-slick.neostack.com/docs/example/pause-on-hover) and it only broke the rows, it turned them into one column(left-aligned).

Do you have any ideas on how to implement this feature?