▲TOPへ戻る

【javascript】無限ループするイメージスライダーをtransform:translateで実装

イメージスライダー
目次

    やりたいこと

    以下のように、左から画像が流れ、無限にループする イメージスライダーの実装方法をご紹介します。
    レスポンシブに対応、 画像を何枚でも増やすことができます。

    HTML

    ここでは画像を6枚使ってますが、画像は何枚でも増やせます。

    <div class="wrapper">
      <div class="content">
        <img src="1.JPG" />
      </div>
      <div class="content">
        <img src="2.JPG" />
      </div>
      <div class="content">
        <img src="3.JPG" />
      </div>
      <div class="content">
        <img src="4.JPG" />
      </div>
      <div class="content">
        <img src="5.JPG" />
      </div>
      <div class="content">
        <img src="6.JPG" />
      </div>
    </div>

    CSS

    ポイントとなるCSSだけ紹介します。

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #333;
      overflow: hidden; /* はみ出した部分を表示させない*/
    }
    .wrapper {
      position: relative;
      width: 50%; /* 画像1枚の横幅 */
      aspect-ratio: 3 / 2;
    }
    .content {
      position: absolute;
      left: 0;
      width: 100%;
      aspect-ratio: 3 / 2;
      overflow: hidden;
    }
    img {
      width: 100%;
      object-fit: cover; /* 画像を中心に */
    }

    9行目 : .wrapperに、 overflow:hiddenを指定すれば、 以下のようになります。

    javaScript

    画像一枚の横幅を取得し、計算する ことにより、 レスポンシブに対応させ、 なおかつ、 画像を何枚でも増やすことができます

    const contents = document.querySelectorAll(".content");
    // 画像一枚の横幅を取得
    const wrapperWidth = document.querySelector(".wrapper").clientWidth;
          
    for (let i = 0; i < contents.length; i++) {
    // 画像の枚数分だけループ
      let leftValue;
      const element = contents[i];
      // 画像を横一列に並べる
      let originValue = -wrapperWidth * (i - 1);
      element.style.transform = "translateX(" + originValue + "px)";
          
      setInterval(function () {
        // 1pxづつ右へスライドさせる
        leftValue = originValue += 1;
        element.style.transform = "translateX(" + leftValue + "px)";
        if (originValue > wrapperWidth * 2) {
        // 画像2枚分右へ隠れたら、一番左にスライド
          originValue = -wrapperWidth * (contents.length - 2);
        }
      }, 10); // 100分の1秒ごとに処理
    }

    参考

    js
    【javascript】setIntervalと、それを停止させるclearIntervalの使い方

    まとめ

    1. 画像一枚の横幅を取得
    2. transform:translateを使って、画像枚数分、横にスライドさせ、画像を1列に並べる。
    3. 画面の右に隠れた画像を、一番左に移動させる。

    こんな記事も読まれています。

    profile

    パソコン好きなガオ

    コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

    パソコン

    javascript

    カメラ

    ブログ