画像の無限ループスライダー

初心者でもコピペで簡単実装できる画像の無限ループスライダー。
画像のスライダーだけでなく、ロゴのスライダーでも活用できる。
ライブラリに依存しないコードだからこそ、どんな環境でも動き、軽量で安定な無限スライダーアニメーション。

HTML

<div class="ugkImgSlider">
  <ul class="ugkImgSlider__lists">
    <li class="ugkImgSlider__item">
      <img src="/animation/wp-content/uploads/2026/01/cat05.jpg" alt="">
    </li>
    <li class="ugkImgSlider__item">
      <img src="/animation/wp-content/uploads/2026/01/cat04.jpg" alt="">
    </li>
    <li class="ugkImgSlider__item">
      <img src="/animation/wp-content/uploads/2026/01/cat03.jpg" alt="">
    </li>
    <li class="ugkImgSlider__item">
      <img src="/animation/wp-content/uploads/2026/01/cat02.jpg" alt="">
    </li>
    <li class="ugkImgSlider__item">
      <img src="/animation/wp-content/uploads/2026/01/cat01.jpg" alt="">
    </li>
  </ul>
</div>

CSS

.ugkImgSlider {
  width: 100%;/* コンテナのサイズ指定 */
  overflow: hidden;
}
.ugkImgSlider__lists {
  list-style: none;
  display: flex;
  column-gap: 20px;/* 画像間の隙間 */
  width: fit-content;/* 中身に合わせて幅を自動調整 */
}
.ugkImgSlider__lists.animating {
  animation: imgSlider 30s linear infinite;/* 早さはここで調整 */
}
@keyframes imgSlider {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.ugkImgSlider__lists:hover {
  animation-play-state: paused;
}
.ugkImgSlider__item img {
  height: 150px; /* 高さを統一（幅は自動） */
  width: auto;
  max-width: max-content;
}

JS

document.addEventListener('DOMContentLoaded',() =>{
  const sliderContainer = document.querySelector('.ugkImgSlider');
  const sliderLists = sliderContainer.querySelector('.ugkImgSlider__lists');
  // 元のli要素たちを取得
  const sliderItems = sliderLists.innerHTML;
  // リストの中身を複製して後ろに追加する
  sliderLists.insertAdjacentHTML('beforeend',sliderItems);
  // 複製が終わってからアニメーションクラスを付与
  sliderLists.classList.add('animating');
});

実際の動き

みんなにもシェアしてあげて！

この記事を書いた人

IYO

WEBサイトで使える“動くUI”を、コピペで実装可能にし、どこでも誰でも使えるコードに特化して発信しているフロントエンドエンジニア。
中学生で初めてコードに出会い初めてコーディングを知る。
その後、WEB制作会社のフロントエンドエンジニアとしてキャリアをスタートし、フリーランスを経て、現在はWEB制作会社の代表取締役。
コーディングによって人生を創り上げてきたからこそ、コードを通して誰かの役に立てたらという想いで、これまでの知識と経験を総動員したコードを公開中。