JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider">

  <div class="wrap">
    <div class="card">
      1
    </div>
    <div class="card">
      2
    </div>
    <div class="card">
      3
    </div>
    <div class="card">
      4
    </div>
    <div class="card">
      5
    </div>
    <div class="card">
      6
    </div>

    <!-- repeat -->

    <div class="card">
      1
    </div>
    <div class="card">
      2
    </div>
    <div class="card">
      3
    </div>
    <div class="card">
      4
    </div>
    <div class="card">
      5
    </div>
    <div class="card">
      6
    </div>
  </div>

</div>

SCSS

.slider {
  overflow: hidden;
}

.wrap {
  display: inline-flex;
  flex-wrap: nowrap;

  gap: 5px;

  animation-name: slide;
  animation-direction: normal;
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background: lightsalmon;

}

@keyframes slide {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(calc(200px * 6 * -1), 0);
    /* each image element is 170px wide and there are twenty (before repeats) */
  }
}