2022/09/08 

【WEB制作】画像スライダーを簡単に実装！

Web制作では、よく画像やコンテンツを横並びにし、スライドさせるのを見かけますよね。
そのスライドをさせる方法としては、jQueryを使用することが多いかもしれませんが、それ以外に、いろいろ多彩な機能があるswiperというライブラリがありますので試してみました。

メリット

swiperのメリットとしては、以下の３つかなと思います。

  • jQueryに依存しない。（jQueryを使用しなくてもできます。）
  • オプション・コールバック関数など、きめ細かくカスタマイズができる。
  • 解説に関して日本語の記事が多いので、実装に困ったとき、英語が苦手な方は大変助かる。

サンプル１-基本の基本

必要最低限のサンプルです。マウスのワイプによりスライドします。

コード

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

<!-- スライダーのコンテナ -->
<div class="sample-1">
  <div class="swiper-container">
   <!-- 必要に応じたwrapper -->
   <div class="swiper-wrapper">
    <!-- スライド -->
    <div class="swiper-slide"><img src="./images/swiper/1.png"></div>
    <div class="swiper-slide"><img src="./images/swiper/2.png"></div>
    <div class="swiper-slide"><img src="./images/swiper/3.png"></div>
   </div>
 </div>
</div>

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script>
const sample_1 = new Swiper(".sample-1 .swiper-container", {
  
});
</script>

サンプル2-ページネーションとナビボタン

ページネーションとナビボタンを追加しました。

コード

<style>
.swiper--wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 500px;
}

.swiper-wrapper .swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 50%;
  height: 100%;
  text-align: center;
  line-height: 300px;
  text-align: center;
}
.swiper-wrapper .swiper-button-prev {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 50%;
  height: 100%;
  text-align: center;
  line-height: 300px;
  text-align: center;
}
</style>

<!-- スライダーのコンテナ -->
<div class="sample-2">
<div class="swiper-container">
<!-- 必要に応じたwrapper -->
<div class="swiper-wrapper">
<!-- スライド -->
    <div class="swiper-slide"><img src="./images/swiper/1.png"></div>
    <div class="swiper-slide"><img src="./images/swiper/2.png"></div>
    <div class="swiper-slide"><img src="./images/swiper/3.png"></div>
</div>
<!-- 必要に応じてページネーション -->
<div class="swiper-pagination"></div>
<!-- 必要に応じてナビボタン -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script>
const sample_2 = new Swiper(".sample-2 .swiper-container", {
  // ページネーションが必要なら追加
  pagination: {
    el: ".swiper-pagination"
  },
  // ナビボタンが必要なら追加
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});
</script>

サンプル3-自動スライド

画像を自動スライドさせます。
slidesPerViewで表示画像を１枚として、breakpointsのslidesPerViewで543px以上を3枚と設定しています。

コード

<style>
.swiper-wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 500px;
}

.swiper-wrapper .swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 50%;
  height: 100%;
  text-align: center;
  line-height: 300px;
  text-align: center;
}
.swiper-wrapper .swiper-button-prev {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 50%;
  height: 100%;
  text-align: center;
  line-height: 300px;
  text-align: center;
}
</style>

<!-- スライダーのコンテナ -->
<div class="sample-3">
<div class="swiper-container">
<!-- 必要に応じたwrapper -->
<div class="swiper-wrapper">
<!-- スライド -->
    <div class="swiper-slide"><img src="./images/swiper/1.png"></div>
    <div class="swiper-slide"><img src="./images/swiper/2.png"></div>
    <div class="swiper-slide"><img src="./images/swiper/3.png"></div>
</div>
<!-- 必要に応じてページネーション -->
<div class="swiper-pagination"></div>
<!-- 必要に応じてナビボタン -->
<div class="swiper-button-prev-3"></div>
<div class="swiper-button-next-3"></div>
</div>
</div>


<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script>
const sample_3 = new Swiper(".sample-3 .swiper-container", {
  pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    autoplay: {
     delay: 5000,
     disableOnInteraction: false,
     waitForTransition: false,
    },
    loop: true,
    speed: 1000,
    effect: 'slide',
    autoplay: true,
    slidesPerView: 3,
    centeredSlides : true,
    slideToClickedSlide: true,
    spaceBetween: 10,
    breakpoints: {
      543: {
        slidesPerView: 1
      }
    }
  });
</script>

パラメータ

swiperのパラメータは多く、すべて説明しきれませんが、代表的なものを載せました。

パラメータタイプ初期値説明
loopbooleanfalsetrue：無限ループさせる。
delayboolean3000次のスライドに切り替わるまでの時間(ms)を指定する。 data-swiper-autoplay 属性を利用して、HTML側で個別に値を指定することも可能です。
disableOnInteractionbooleantrue true：ユーザーが操作したときに自動再生を止める。 false にしておくのがお勧め。
reverseDirectionbooleantrue自動再生の進行方向を逆にする。
waitForTransitionbooleantruetrue：スライド切り替えのアニメーションの間は自動再生を止める。 true だと1枚目のスライドだけ表示時間が短くなるため、表示時間を揃えたいなら false にするのがお勧め。
speednumber300スライド切り替えのアニメーションのスピード(ms)を指定する。
effect‘slide’ | ‘fade’ | ‘cube’ | ‘coverflow’ | ‘flip’ | ‘creative’ | ‘cards’‘slide’エフェクトのタイプを指定します。 詳しくは公式のデモを参照する。
slidesPerView number | 'auto'1ビューあたりのスライド数 (スライダーのコンテナで同時に表示されるスライド) を指定します。 もし "auto "値でloop: trueと一緒に使うなら、loopedSlidesパラメータに、ループするスライドの数を指定する必要があります（重複）。 slidesPerView: auto' は現在、grid.rows > 1 の場合、multirow モードと互換性がありません。

公式デモはこちら