MENU
  1. ホーム
  2. フロントエンド
  3. JavaScript
  4. 【Swiper】一定速度で横に流れ続ける無限ループスライドショーを実装する方法

【Swiper】一定速度で横に流れ続ける無限ループスライドショーを実装する方法

JavaScript

高機能なスライダーを実装できるJSライブラリ「Swiper」を使用して、以下のような機能のスライドショーを作成していきます。

  • 一定速度で横方向にゆっくり流れる
  • 1枚ずつではなく連続的に動く
  • 最後のスライドまで到達すると、最初のスライドからスタートする（無限ループ）

実際の動作を確認するための実装DEMOや、コピペしてすぐに使用できる実装コード一式も用意していますので、ぜひ参考にして作成してみてください。

目次

無限ループスライドショーの実装DEMO

今回実装するスライダーのDEMOを以下に用意しましたので、実際の挙動を確認してください。

※動作しない場合はページをリロードしてください。

画像が横方向に一定速度で流れるスライダーが確認できたかと思います。

次でコピペ用の実装コード一式を紹介しますので、ぜひ自身の環境で試してみてください。

【コピペ用】無限ループスライドショーの実装コード一式

HTML・CSS・JavaScriptの実装コードを載せてますので、コピペしてお使いください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>【Swiper】無限ループスライドショーの実装DEMO</title>
    <!-- CDN読み込み -->
    <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
    <!-- CSSファイル読み込み -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="swiper infinite-slider">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="img-1.jpg" alt="画像1" /></div>
          <div class="swiper-slide"><img src="img-2.jpg" alt="画像2" /></div>
          <div class="swiper-slide"><img src="img-3.jpg" alt="画像3" /></div>
          <div class="swiper-slide"><img src="img-4.jpg" alt="画像4" /></div>
        </div>
      </div>
    </div>

    <!-- CDN読み込み -->
    <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
    <!-- JSファイル読み込み -->
    <script src="main.js"></script>
  </body>
</html>
  • CSSとJavaScriptファイルへのパスは各自指定してください。
  • 画像は配布していませんので、自身で用意してください。画像へのパスも各自指定してください。
/* コンテナー */
.container {
  max-width: 900px;
  margin: 0 auto;
}

/* スライダーのwrapper */
.infinite-slider .swiper-wrapper {
  transition-timing-function: linear;
}

/* スライド */
.infinite-slider .swiper-slide {
  height: 320px !important; /* 高さを指定 */
  width: auto !important;
}

/* スライド内の画像 */
.infinite-slider .swiper-slide img {
  width: auto;
  height: 100%;
}
window.addEventListener("DOMContentLoaded", () => {
  const infiniteSlider = new Swiper(".infinite-slider", {
    loop: true,
    loopedSlides: 2,
    slidesPerView: "auto",
    speed: 8000,
    autoplay: {
      delay: 0,
      disableOnInteraction: false,
    },
  });
});

実装コードの紹介は以上になります。

これらをコピペすると、DEMOと同じスライダーを実装することができます！

画像は各自で用意していただく必要があるので、その点は注意してください。

次の章では実装コードの解説を行いますので、自身でカスタマイズしたい・コードを理解したいという方はぜひ読み進めてください。

【解説】無限ループスライドショーの実装コード解説

ここからは、先ほど紹介したコードの詳しい解説をしていきます。

  1. Swiperを使用するための下準備
  2. HTMLの解説
  3. CSSの解説
  4. JavaScriptの解説

上記の順番で進めていきます。

①Swiperを使用するための下準備

まずSwiperを使用するためには、ライブラリをプロジェクト内に読み込む必要がありますね。

今回は一番手軽に読み込むことができるCDNを使用していきます。

CSSはheadタグ内に、JavaScriptはbody閉じタグの直前に記述してください。

<head>
  <!-- head内でCSSのCDNを読み込む -->
  <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <!-- bodyの閉じタグ直前でJSのCDNを読み込む -->
  <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
  <script src="script.js"></script>
</body>

これでSwiperを使用するための準備が整いました。

npmでのインストール、アセットを直接ダウンロードするなど他にも読み込む方法はありますので、詳しくはSwiperの公式ページから確認してください。

②HTMLの解説

HTMLでは、スライダー本体に必要なタグを記述します。

<div class="container">
  <div class="swiper infinite-slider">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="img-1.jpg" alt="画像1" /></div>
      <div class="swiper-slide"><img src="img-2.jpg" alt="画像2" /></div>
      <div class="swiper-slide"><img src="img-3.jpg" alt="画像3" /></div>
      <div class="swiper-slide"><img src="img-4.jpg" alt="画像4" /></div>
    </div>
  </div>
</div>

スライダーの大枠部分には、infinite-sliderなどのわかりやすいクラス名をつけておきます。

中にはSwiperを使う上で必要なswiper-wrapperと、各スライド要素のswiper-slideを設置してください。

スライドの中身の画像は各自用意していただき、画像へのURLを記述して完成です。

③CSSの解説

続いてはCSSを見ていきましょう。まずは全体のコードを確認します。

/* コンテナー */
.container {
  max-width: 900px;
  margin: 0 auto;
}

/* スライダーのwrapper */
.infinite-slider .swiper-wrapper {
  transition-timing-function: linear;
}

/* スライド */
.infinite-slider .swiper-slide {
  height: 320px !important; /* 高さを指定 */
  width: auto !important;
}

/* スライド内の画像 */
.infinite-slider .swiper-slide img {
  width: auto;
  height: 100%;
}

ここでは、以下の3つの重要なポイントを説明していきます。

  1. スライドの横スクロール速度を一定にする
  2. スライドの縦幅・横幅を指定する
  3. スライド内の画像サイズを指定する

CSS①スライドの横スクロール速度を一定にする

スライダーの横スクロールの動きを一定にするには、swiper-wrapperクラスに以下のコードを追加します。

/* スライダーのwrapper */
.infinite-slider .swiper-wrapper {
  transition-timing-function: linear;
}

transition-timing-functionプロパティでは、アニメーションの実行速度を指定できますね。

このプロパティのデフォルト値はeaseで、開始時から徐々に加速し、終わりに近づくと徐々に遅くなるという効果がかかっています。

これをlinearにすることで、アニメーションの実行速度が一定になります。

CSS②スライドの縦幅・横幅を指定する

続いては、各スライドの大きさを指定します。

/* スライド */
.infinite-slider .swiper-slide {
  height: 320px !important; /* 高さを指定 */
  width: auto !important;
}

swiper-slideクラスに、heightとwidthを指定してください。

ここでは高さを一定にしたいので、heightには好きな値を指定、widthはautoにします。

swiper-slideクラスには、Swiperの機能でstyle属性にwidthの値が指定されているため、それを上書きするために!importantをつける必要があります。

CSS③スライド内の画像サイズを指定する

最後に、スライド内の画像の大きさを指定します。

/* スライド内の画像 */
.infinite-slider .swiper-slide img {
  width: auto;
  height: 100%;
}

②の段階で、swiper-slideクラスに対して各スライドの高さを指定しましたね。

なので、中に入る画像にはheight: 100%、そして画像の比率を変更してしまわないようwidthにはautoを指定します。

これでどんなサイズの画像を設置しても、一定の高さを保つ＆画像の本来の比率のまま表示することができます。

以上でCSSの解説は終わりです！

④JavaScriptの解説

最後はJavaScriptの設定を見ていきます。

以下が全体のJavaScriptコードです。

window.addEventListener("DOMContentLoaded", () => {
  const infiniteSlider = new Swiper(".infinite-slider", {
    loop: true,
    loopedSlides: 2,
    slidesPerView: "auto",
    speed: 8000,
    autoplay: {
      delay: 0,
      disableOnInteraction: false,
    },
  });
});

まずはHTML上に設置したSwiperのタグを選択する必要があるので、以下のコードを記述します。

const infiniteSlider = new Swiper(".infinite-slider", {
  // ここにオプションを指定
}

HTMLでinfinite-sliderというクラスを指定しましたね。

new Swiperの第一引数に↑のクラスを指定します。

続いては、オプションについて解説していきます。

const infiniteSlider = new Swiper(".infinite-slider", {
  loop: true,
  loopedSlides: 2,
  slidesPerView: "auto",
  speed: 8000,
  autoplay: {
    delay: 0,
    disableOnInteraction: false,
  },
});
スクロールできます
オプション名詳細
looptrueでスライダーがループするようになる。
loopedSlidesループ時に何枚のスライドを複製するかを指定。slidesPerView: 'auto'とloopを併用する場合は、このオプションが必要。
slidesPerView一度に何枚のスライドを表示するかを指定。'auto'にすると、各スライドが持つ本来の横幅が指定される。
speedスライドが切り替わる速度を指定。
autoplayスライダーが自動再生するようになる。
delay…スライドが表示されてから、次のスライドに移動するまでの停止時間を指定。停止させたくないので、0にしておく。
disableOnInteraction…falseにすると、ユーザーがスライドをドラッグやスワイプしても、すぐに自動再生が再開する。

以上が今回のスライダー実装に使用したオプションです。

さらに詳しい情報を知りたい方は、Swiperの公式ページからご確認ください。

これでJavaScriptの解説は終わりです。

【まとめ】Swiperで横に流れ続ける無限ループスライドショーを実装する方法

Swiperで、一定速度で横に流れ続けるループスライダーを実装する方法を紹介しました。

他にも様々なSwiperカスタマイズ記事を書いていますので、興味があれば読んでみてください。

Swiperの記事一覧

記事が役に立ったらサポートしてください

Web制作に関する
記事案を募集中！

Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。
要望が多かったものは解説記事を作成します。

POST
JavaScript
Swiper
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメントする

CAPTCHA


目次