WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： ノムさん
カテゴリー： プログラム >JavaScript

コーポレートサイトやLPにおいて、画像などのスライダー機能をよくみかけます。 簡単にスライダーを実装できるプラグインは様々なものがありますが、今回は利用者が多く人気の「Swiper」についてご紹介します。

Swiperを使用するメリット

最大の特徴としては「jQueryに依存しない」ということです。jQueryを読み込む必要がないため、それらを使用するその他のスライダーライブラリよりも高速で読み込むことができますし、jQueryが使用出来ない場合にも使うことが可能です。
またその他にも以下のようなメリットがあります。

• レスポンシブに対応
• スワイプしやすい（slickに比べて）
• 更新頻度が高い
• カスタマイズ性が高い

では以下より実装例をご説明します。

サンプル

See the Pen
【Swiper】カバーフロースライダー by qam (@qam)
on CodePen.

今回は以下条件のスライダーを実装してみます。

• カバーフロー
• スライドを繰り返す
• スライドを自動で切り替える

Swiperの導入（CDN）

導入方法は様々ありますが、今回はCDNを使った方法で制作していきます。
以下コードをheadタグに記述します。

<!-- SwiperのCSSファイル -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<!-- SwiperのJavaScriptファイル -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

html

ページネーションやボタンの設置も考えて以下のコードを記述します。

<!-- スライダーのコンテナ -->
<div class="swiper">
<!-- 必要に応じたwrapper -->
<div class="swiper-wrapper">
<!-- スライド -->
<div class="swiper-slide slide-orange">Slide 1</div>
<div class="swiper-slide slide-blue">Slide 2</div>
<div class="swiper-slide slide-pink">Slide 3</div>
<div class="swiper-slide slide-green">Slide 4</div>
			
</div>
<!-- ページネーション -->
<div class="swiper-pagination"></div>
<!-- ナビボタン -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

CSS

デフォルトでは背景色や高さ、横幅の指定がなく分かりづらいため調整していきます。

.swiper-wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 300px;
}
.swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 300px;
}
.swiper-slide.slide-orange {
  background-color: #ff7f00;
}
.swiper-slide.slide-blue {
  background-color: #000bff;
}
.swiper-slide.slide-pink {
  background-color: #ff00ff;
}
.swiper-slide.slide-green {
  background-color: #00ff00;
}

Javascript

以下が基本となるJSのコードです。最低限の記述です。初期化とも呼ばれます。

const swiper = new Swiper(".swiper", {});

次にループやページネーション、ナビボタンなどのオプション設定を追加していきます。

  
const swiper = new Swiper('.swiper', {
　　// ループを有効化
    loop: true,  

    // ナビボタン
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // ページネーション
    pagination: {
      el: '.swiper-pagination', // クリックによるスライド切り替えを有効にする
      clickable: true, // クリックによるスライド切り替えを有効にする
    },

　　//　自動再生
    autoplay: {
      delay: 5000,  // 5秒ごとにスライドを切り替える
      disableOnInteraction: false,　//ユーザーがスライダーを操作した時、自動再生は止めない
    },

　　　grabCursor: true,  //swiperにカーソルを置いたときに指のカーソルが表示される
　　　centeredSlides: true,　//アクティブなスライドが中央に配置される
　　　slidesPerView: "2",　//　1ビューあたりのスライド数

　　// カバーフロー
　　　effect: "coverflow",
  });

まとめ

いかがでしたでしょうか？coverflowEffectオプションを使用することで、カバフロースライダーのスライドの角度や拡大率、影の有無等様々なカスタマイズをすることも可能です。ぜひ試してみてください。