シームレスなスライドショーを実装する

<div class="slideshow">
  <div class="track">
    <!-- 画像5枚 × 2セット（シームレスのため） -->
    <img src="http://img.youtube.com/vi/qwOxqlvq8Po/sddefault.jpg" alt="1">
    <img src="http://img.youtube.com/vi/dnNkWDZqDHI/sddefault.jpg" alt="2">
    <img src="http://img.youtube.com/vi/hwI5iwJl3yg/sddefault.jpg" alt="3">
    <img src="http://img.youtube.com/vi/Y9ZHxze6OQI/sddefault.jpg" alt="4">
    <img src="http://img.youtube.com/vi/lWW4yZJRgnM/sddefault.jpg" alt="5">

    <!-- 複製 -->
    <img src="http://img.youtube.com/vi/qwOxqlvq8Po/sddefault.jpg" alt="1">
    <img src="http://img.youtube.com/vi/dnNkWDZqDHI/sddefault.jpg" alt="2">
    <img src="http://img.youtube.com/vi/hwI5iwJl3yg/sddefault.jpg" alt="3">
    <img src="http://img.youtube.com/vi/Y9ZHxze6OQI/sddefault.jpg" alt="4">
    <img src="http://img.youtube.com/vi/lWW4yZJRgnM/sddefault.jpg" alt="5">
  </div>
</div>

.slideshow {
  overflow: hidden;
  width: 100%;
  /*max-width: 800px;*/
  /*aspect-ratio: 16 / 9;*/
  margin: 40px auto;
  /*border-radius: 12px;*/
}

.track {
  display: flex;
  width: max-content;
  animation: scroll-left 30s linear infinite;
}

.track img {
  height: 580px;
  width: auto;
  aspect-ratio: 9 / 16; /* 縦長画像の比率を保つ */
  border-radius: 20px;
  margin-right: 16px;
  flex-shrink: 0;
  object-fit: cover;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* スマホ対応（1列表示） */
@media (max-width: 768px) {
  .track img {
    height: 320px;
  }
}