実装の考え方

スライダーライブラリとして1番使われているSwiperを使用して、基本的なスライダーの実装方法を紹介します。まずは基本的なSwiperの使い方として、スライダーの表示枚数が1枚の場合の実装方法を紹介します。

スライダーの表示枚数を1枚に設定するには、Swiperの設定でslidesPerViewを1に設定します。また、ページネーションと矢印ボタンを機能させるには、Swiperの設定でpaginationとnavigationを設定します。

バージョン情報

この記事で使用しているSwiperのライブラリのバージョンは以下の通りです。

Swiperの読み込みに関しては、解説しませんが、importかCDNでCSSファイルとJSファイルを読み込んでください。importの例は下記のようになります。

import Swiper from 'swiper';
import 'swiper/css/bundle';

実装方法

それでは実際に実装していきましょう。
まずはHTMLになります。

HTML

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://picsum.photos/640/360?random=1" alt="">
    </div>
    <!-- スライダー枚数分追加 -->
  </div>
  <!-- スライダーの矢印ボタンとページネーション -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-pagination"></div>
</div>

Swiperの使い方として、親要素にswiperクラスを設定し、子要素にswiper-wrapperクラスを設定します。さらに、スライダーの各要素にswiper-slideクラスを設定します。スライダーの枚数分をswiper-slideでswiper-wrapperの中に追加してください。

スライダーの矢印ボタンは、swiper-button-prevとswiper-button-nextになり、ページネーションはswiper-paginationをswiperの中に入れましょう。スライダーの矢印ボタンとページネーションは、SwiperのCSSファイルでデフォルトのスタイルが設定されおり、機能はJavaScriptで設定します。

基本的なスライダーなのでCSSに関しては、SwiperのCSSファイルのみでデモのレイアウトになるので省略します。

JavaScript

最後にJavaScriptを実装していきます。

new Swiper('.swiper', {
  slidesPerView: 1,
  navigation: {
    prevEl: '.swiper-button-prev',
    nextEl: '.swiper-button-next',
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

スライダーの表示枚数を1枚に設定するには、Swiperの設定でslidesPerViewを1に設定します。

スライダーの矢印とページネーションを機能させるために、矢印はnavigationにprevとnextをHTMLで設定したクラスswiper-button-prev,swiper-button-nextを設定します。

ページネーションはpaginationにelをHTMLで設定したクラスswiper-paginationを設定します。ページネーションをクリックした時にスライダーを切り替えるため、clickableをtrueに設定します。

以上で、基本的なスライダーの実装が完了しました。