Swiperで立体スライダーを作る

立体的なSwiperスライドを「カバーフロースライダー」と呼ぶそうです。
挙動はCodePenをご覧ください。

基本的なSwiperと使い方は同じです、JavaScriptに少し記述を加えると立体になります。

作り方

CDNの読み込み

CDNでSwiperを読み込む

HTML

htmlでSwiperの型を作る

index.html

<div class="swiper card-swiper" id="card-swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="card">
        <div class="card__body">
          <h2 class="card__title">カード1のタイトル</h2>
          <p class="card__text">内容</p>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="card">
        <div class="card__body">
          <h2 class="card__title">カード2のタイトル</h2>
          <p class="card__text">内容</p>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="card">
        <div class="card__body">
          <h2 class="card__title">カード3のタイトル</h2>
          <p class="card__text">内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="card">
        <div class="card__body">
          <h2 class="card__title">カード4のタイトル</h2>
          <p class="card__text">内容内容内容</p>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="card">
        <div class="card__body">
          <h2 class="card__title">カード5のタイトル</h2>
          <p class="card__text">内容</p>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="card">
        <div class="card__body">
          <h2 class="card__title">カード6のタイトル</h2>
          <p class="card__text">内容内容内容内容内容</p>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="card">
        <div class="card__body">
          <h2 class="card__title">カード7のタイトル</h2>
          <p class="card__text">内容</p>
        </div>
      </div>
    </div>
  </div>
  <div class="swiper-button-prev">
  </div>
  <div class="swiper-button-next">
  </div>
</div>

CSS

cssを書く

style.css

* {
  color: #333;
}

.l-container {
  max-width: 1200px;
  margin: 0 auto;
}

.card {
  background-color: #f5f5f5;
  border: solid 1px #333;
  border-radius: 10px;
  padding: 20px;
}

.card__title {
  border-bottom: solid 1px #333;
}

JavaScript

javaScriptを書く

main.js

const cardSwiper = new Swiper("#card-swiper", {
  loop: true,
  slidesPerView: 2.5,
  centeredSlides: true,
  effect: "coverflow",
  coverflowEffect: {
    rotate: 0,
    depth: 500,
    stretch: 30,
    modifier: 1,
    slideShadows: false,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

coverflowの解説

設定した値を解説します。
カバーフロー効果を使うために、コード内に必須で書く内容があるので忘れないようにしてください。

const cardSwiper = new Swiper("#card-swiper", {
  loop: true,
  slidesPerView: 2.5,
  centeredSlides: true,
  effect: "coverflow", //必須
  coverflowEffect: { //必須
    rotate: 0,
    depth: 500,
    stretch: 30,
    modifier: 1,
    slideShadows: false,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

名前	型	デフォルト	説明
depth	数値	100	スライドの深さ（Z軸方向の位置）。この値を大きくすると、スライドが手前に近づいたり、奥に遠ざかったりする。ここでは500に設定されており、スライドがかなり奥に配置される感じ。
modifier	数値	1	エフェクトの倍率。この値が1ならエフェクトがそのまま適用されるが、2にするとエフェクトが強調され、スライドがより大きく回転したり、縮小されるような効果が得られる。
rotate	数値	50	スライドが回転する角度
scale	数値	1	scale: 1（デフォルト値）では、スライドはそのままのサイズで表示される。2なら2倍のサイズになる。
slideShadows	真偽値	true	trueを指定するとスライドに影がつく
stretch	数値	0	スライド間のスペースの引き伸ばし。この値を大きくすると、スライド間の隙間が広がる。

公式ドキュメントより

---

スライドの挙動を簡単に実装できるSwiperにはお世話になりまくりです。
いつも同じスライドアニメーションを使ってしまいがちなので、たまに新しいアニメーションを調べると勉強になります。

その他のSwiper記事