【Swiper】様々なスライダーを実装

はじめに

概要

このページでは、Swiperライブラリを使用して、ウェブページ上でスライダー（カルーセル）を作成する方法が説明されています。基本的なセットアップ方法、オプション設定、カスタマイズ方法、および応用例が含まれています。スライダーを使用することで、画像やコンテンツを魅力的に表示するインタラクティブなユーザーインターフェースを構築できます。

読者

Swiper様々なスライダーを実装は、最初にどこを理解するとよいですか？

木村

対象要素を取得する処理、動作を始める条件、見た目を変える処理の三つに分けると、コードの流れを追いやすくなります。

読者

実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？

木村

はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

実装内容

パターン1 slide

パターン2 Fade

パターン3 CoverFlow

パターン4 無限スタイだー

GitHub

コードの詳細はこちらを参照にしてください。

ポイント解説

実際のWebサイトでは、同じページ内でスライドやフェードインといったアニメーションがよく使われています。これを同じライブラリを使って実装するのは少し難しいですが、以下のポイントを抑えることが大切と考えます。

Swiperのコード

<div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="https://picsum.photos/1000/800?random=1" alt=""></div>
      <div class="swiper-slide"><img src="https://picsum.photos/1000/800?random=2" alt=""></div>
      <div class="swiper-slide"><img src="https://picsum.photos/1000/800?random=3" alt=""></div>
      <div class="swiper-slide"><img src="https://picsum.photos/1000/800?random=4" alt=""></div>
      <div class="swiper-slide"><img src="https://picsum.photos/1000/800?random=5" alt=""></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

上記はSwiperのデフォルトのコード例です。ここで注目したいのが'mySwiper'クラスです。このクラス名は任意でどのようなクラス名を設定しても良いです。同じページにswiperを実装する場合は、このクラスをptn01,ptn02・・・等に変更し、それらを指定することでそれぞれを区別することができます。

使用例

以下は上記のアニメーションの指定例です。swiper ptn01等に設定し記述しています。

//  パターン01 
new Swiper(".ptn01", {
      loop: true,
      centeredSlides: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      breakpoints: {
        768: {
          slidesPerView: 1.5,
          spaceBetween: 30,
        },
      },
    });

// パターン02
    new Swiper(".ptn02", {
      loop: true,
      effect: "fade",
      autoplay: {
        delay: 5000,
        disableOnInteraction: false,
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });

// パターン03
    new Swiper(".ptn03", {
      loop: true,
      effect: "coverflow",
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: "auto",
      coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true,
      },
      pagination: {
        el: ".swiper-pagination",
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      breakpoints: {
        768: {
          slidesPerView: 2.2,
          spaceBetween: 10,
        },
      },
    });

// パターン04
    new Swiper(".ptn04", {
      spaceBetween: 10,
      loop: true, // ループ有効
      slidesPerView: 3, // 一度に表示する枚数
      speed: 6000, // ループの時間
      allowTouchMove: false, // スワイプ無効
      autoplay: {
        delay: 0, // 途切れなくループ
      },
    });

まとめ

Swiperを同ページ内で実装する方法を解説
任意のクラス名を設定する
クラス名が被らないように注意する
Swiperには様々なオプションが準備されている

【Swiper】様々なスライダーを実装

目次