【Swiper】流れるような無限スクロールのスライドを作る方法！

2024年12月26日
2025年1月23日
JavaScript
library, Swiper

JavaScript

「流れるような無限スクロールのスライドを作りたい！」そんなニーズに応えるSwiperの設定方法をご紹介します。

基本的なswiperの使い方は、【Swiperの基本】シンプルで美しいスライダーを作成する方法！書いてます。

【Swiperの基本】シンプルで美しいスライダーを作成する方法！

Webサイトでスライダーを使用すると、コンテンツを魅力的に見せることができます。しかし、スライダーを自分で一から実装するのは難しく、手間がかかます。そんな時に役立つのが「Swiper」というライブラリです。 Swip[…]

Swiperを体系的に学びたい方は、Swiperの使い方とレイアウト集！の記事をお読みください。

順を追ってSwiperの使い方を解説しています。

Swiperの使い方とレイアウト集！

本記事では、Swiperの導入方法から基本的な記述を学べるだけでなく、多彩なレイアウトを実装できるようになります。 Swiperは、有名企業のWebサイトでも使われている高性能なJavascriptライブラリです。カスタマイ[…]

流れるようなスライドを実現するSwiperの設定方法
サンプルコードとカスタマイズのポイント
背景色付きのシンプルなスライドデザイン

1 完成のコード！
2 スライド方向を逆方向にしてみる！
3 【応用編】左右逆方向のスライドを組み合わせてみる！
4 まとめ

完成のコード！

基本的なことは、別記事になっているので、ここではいきなり完成コードからお見せします！

See the Pen 【swiper】無限スクロール by 1buk1 (@1buk1) on CodePen.

HTML

<!-- css swiper -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<!-- css swiper -->

<div class="horizontal-swiper swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <p class="scroll-item item-1">コンテンツ1</p>
    </div>
    <div class="swiper-slide">
      <p class="scroll-item item-2">コンテンツ2</p>
    </div>
    <div class="swiper-slide">
      <p class="scroll-item item-3">コンテンツ3</p>
    </div>
    <div class="swiper-slide">
      <p class="scroll-item item-4">コンテンツ4</p>
    </div>
    <div class="swiper-slide">
      <p class="scroll-item item-5">コンテンツ5</p>
    </div>
    <div class="swiper-slide">
      <p class="scroll-item item-6">コンテンツ6</p>
    </div>
    <div class="swiper-slide">
      <p class="scroll-item item-7">コンテンツ7</p>
    </div>
    <div class="swiper-slide">
      <p class="scroll-item item-8">コンテンツ8</p>
    </div>
    <div class="swiper-slide">
      <p class="scroll-item item-9">コンテンツ9</p>
    </div>
  </div>
</div>

HTMLは、swiperの基本と変わりません。

今<p>タグが入ってる箇所に、お好きなコンテンツを入れていただければOKです！

css

.horizontal-swiper {
  width: 70%;
}

.horizontal-swiper.swiper {
  .swiper-wrapper {
    transition-timing-function: linear;
  }

  .swiper-slide {
    width: 33.333%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    text-align: center;
    color: #fff;
    font-weight: bold;
  }

  .swiper-slide p {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 2rem;
    height: 100%;
  }

  .swiper-notification {
    display: none;
  }
}

/* 各スライドの背景色 */
.item-1 {
  background-color: #ff7f7f;
}

.item-2 {
  background-color: #ffa07a;
}

.item-3 {
  background-color: #fbc02d;
}

.item-4 {
  background-color: #81c784;
}

.item-5 {
  background-color: #64b5f6;
}

.item-6 {
  background-color: #ba68c8;
}

.item-7 {
  background-color: #ffb74d;
}

.item-8 {
  background-color: #4db6ac;
}

.item-9 {
  background-color: #90a4ae;
}

cssでは、滑らかなスライドを表現するために、以下を上書きさせるかたちで適用させています。

.horizontal-swiper.swiper {
  .swiper-wrapper {
    transition-timing-function: linear;
  }
}

transition-timing-function: linear;を適用させることで、スライドの動作が一定になり、滑らかな動作となります。

JavaScript

const slideSpeed = 11000;

const swiper01 = new Swiper('.horizontal-swiper', {
  loop: true,
  slidesPerView: "auto",
  speed: slideSpeed,
  allowTouchMove: false,
  autoplay: {
    delay: 0,
    disableOnInteraction: false,
  },
});

「loop: true:」と「autoplay:」無限にスライドを繰り返すために必要ですので、お忘れ無く！

スピードを調整したい場合は、const slideSpeed = 11000;の「11000」を変更してみてください。

以上、無限スライドを作るためのコードの解説です。

スライド方向を逆方向にしてみる！

さきほどは、右から左に流れていましたが、今度は左から右にスライドを流してみましょう！

追加するコードは１行だけなので、簡単に実装できます。

See the Pen 【swiper】無限スクロール（左→右） by 1buk1 (@1buk1) on CodePen.

追加したコードは、以下です。

reverseDirection: true, // 追加: スライドの方向を逆にする

【応用編】左右逆方向のスライドを組み合わせてみる！

左右のスクロールを組み合わせて、下記のようなスライドを作ることも可能です！

See the Pen 【swiper】無限スクロール（左→右）２段以上 by 1buk1 (@1buk1) on CodePen.

まず、同一ページ内に複数のSwiperを設置する場合、定義するSwiper名をそれぞれ変更しなくてはなりません。

こちら、間違えると動かないので注意してください！

//一部コードを抜粋

const mySwiperTop = new Swiper('.swiper-top', {
  ...parts,
});

const mySwiperMiddle = new Swiper('.swiper-middle', {
  ...parts,
  autoplay: {
    ...parts.autoplay,
    reverseDirection: true
  },
});

const mySwiperBottom = new Swiper('.swiper-bottom', {
  ...parts,
});

「mySwiperTop」の部分がそうです！

それぞれ、自分がわかりやすい名前に設定しましょう！

次に共通部分のオプションを定義します。

//一部コードを抜粋

const option = {
 loop: true,
 slidesPerView: "auto",
 allowTouchMove: false,
 speed: 6000,
 autoplay: {
  delay: 0,
  disableOnInteraction: false,
 },
}

スライド方向以外は、一緒なのであらかじめ定義しておきます。

定義したオプションは、それぞれ展開してあげます！

//一部コードを抜粋

const mySwiperTop = new Swiper('.swiper-top', {
  ...option,
});

これで、すべてのSwiperに同じオプションが設定されました。

あとは、逆方向に動くSwiperにスライドを逆にするオプションを設定してあげれば完成です！

//一部コードを抜粋

const mySwiperMiddle = new Swiper('.swiper-middle', {
  ...option,
  autoplay: {
    ...option.autoplay,
    reverseDirection: true
  },
});

autoplay: {}の中で設定しています！

使ってみてください！

まとめ

無限スクロールスライドは、動きのあるデザインを簡単に実現でき、同じスライドでも簡単に印象を変えることが可能です！

swiperは、基本を押さえてしまえば、簡単に実装できるライブラリでカスタマイズ性も高いです。

実務での経験上、使用頻度も高いので、自由自在に扱えるようになっておいて損はありません。

そのためには、基本がとても大切です！もし、基礎があいまい・・・という方がいましたら「
Swiperの基本的な使い方」の記事をご覧ください。