フリックすると左右に画像が切り替わるカルーセルスライダーを作る方法について、現況における選択肢をまずご説明した上で、最適だと私が思う方法をご紹介します。

結論としては、ライブラリは利用。ライブラリの中では、jQueryなし、つまり素のJavaScriptベースのみで作れるからということと、カスタマイズ性の高さ、完成度の高さでswiperを利用するのが良いと考えています。

素のJavaScriptでカルーセルスライダーを作る選択肢とswiperの使い方

カルーセルスライダーを作るための選択肢

ライブラリは色々ありますが、カルーセルスライダーを作る方法として、以下の5つが私にとっての選択肢でした。

slick(jQuery利用)

slick

使いやすいようです。ただ、jQueryを利用していない私にとって、これだけのためにjQueryを読み込むのは無念でならないですし、それを抜きにしても、次のswiperに比べて、スマホでフリックした際の反応が悪いという評判をいくつか見ました。

なので、slickは実際に試すところまでやってないです。

swiper

swiper

swiperは、slickに比べると利用難度が高いようですが、カスタマイズ性はslickよりも高く、上述の通り、フリック時の反応も良いという評判。そして何より、jQueryに依存しないのでjQueryを読み込まなくても済みます。

Flickty

Flickity

これもjQuery不要で、試したのですが非常に使いやすく簡単に実装ができました。ただ、最近ベータ版から正式版になったばかりで、表示に関するバグらしき症状を確認しています。横幅によっては表示がおかしくなります。コントロール類のボタン配置にも制約がありました。

今後には期待できると感じられるものでした。

splide

splide

splideもjQuery不要で、さらに素晴らしいのは非常にファイルが軽いということ。jsファイルが28.9KBです。本記事で使い方まで紹介する上述のswiperはjsファイルが139KBで結構重いので、この点ではsplideが良いです。

また、aria-labelや、Live Regionsというアクセシビリティのための仕様であるWAI-ARIAに対応しています。アクセシビリティに配慮する姿勢も素晴らしいです。ただ私は、アクセシビリティ対応はこれ使わなくてもできます。大事なのは、スライダーで示している情報がスクリーンリーダーユーザーにも伝わるかどうか、そもそも伝えるべきなのかどうか、というところをちゃんと考えることです。Live Regionsは、動的に変化する部分をその都度スクリーンリーダーユーザーに伝えるということをするものなので、Live Regionsをカルーセルスライダーに適用するのは、良くない場合も多いと思います。いちいち伝えられると邪魔になる場合が多いように思うからです。必要な要件としては、スクリーンリーダーユーザーであっても、キーボード操作のみであっても、全ての要素を把握できるか、ということだと思います。

課題はさておき、もうひとつメリットが、日本人が開発しているので、ドキュメントが日本語で存在します。

ただ、画像の両脇に画像を少し見せるということができず、その時点で今のところ私は利用したことがありません。作る内容によっては、ファイルが軽いので今後splideを利用することもあると思います。

自作

最後の選択肢、それはもちろん自作です。むしろ何かに依存するというのを避けたい気持ちが強い私はまず最初に考えてみる選択肢です。

  1. まず最初に自作という選択肢での作り方を考える
  2. いや、「これはさすがにプラグインだろ」と思う
  3. プラグインで思うようにカスタマイズできないと気づき、あらためて自作を考える
  4. 自作を開始して、相当に工数かかると気づく

こういうプロセスを経て、さらに上述の通りライブラリを比較したうえでswiperを利用しているというのが現在です。

swiperの利用例

例えばですが、次のようなスライダーが簡単に実装できます。

swiperの利用方法

swiperの読み込み

1)入手して読み込む場合

Getting Started With Swiper

入手先は変わることがあるようなので、上記リンク先のページを見た方が早いかもしれません。現時点ではこのページから入手できます。ダウンロードできる形になっていないので、コピーするか保存します。

必要なファイルは次の3つのうち2つで、CSSファイルについて、2か3のどちらかを選びます。

  1. swiper-bundle.min.js
  2. swiper-bundle.min.css
  3. swiper.min.css

2はある程度最初からCSSが当たっている分少しファイルが重いわけですが、最初から3で調整していこうとしても、どこにCSSを当てればよいか探るのが大変です。

まずは2でCSSを好きなように当てて、その後、3に変更するという手順がおすすめです。

2)CDNを利用する場合

現時点最新バージョンのCDNは以下です。

CSS

<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper.min.css"/>

JavaScript

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

HTMLでスライドを作る

以下の記述が基本形です(先ほどのデモとは少し違います)。

<!-- スライダー部分 -->
<div class="swiper">
   <div class="swiper-wrapper">
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
   </div>
</div>

<!-- ページネーション -->
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

<!-- スクロールバー -->
<div class="swiper-scrollbar"></div>

クラス名は全て指定されているものです。

「スライダー部分」のクラス名swiperは、後述するJavaScriptの記述でも合わせる必要があるので注意です。ver.6まではswiperswiper-containerだったため、そこがswiper-containerとなっている記事を見かけますが、swiperが正しいです。

「ページネーション」と「スクロールバー」は不要であればHTMLから削除しても大丈夫です。

JavaScriptで動かす

const mySwiper = new Swiper (' .swiper ', {
   //設定
} );

この記述を行うことでスライダーが動きます。.swiperの部分は、HTMLの一番外枠のdiv要素につけられているクラス名です。
先ほどお示ししたデモは以下の設定になっています。

const mySwiper = new Swiper ('.swiper', {
   // 以下にオプションを設定
   loop: true, //最後に達したら先頭に戻る
   slidesPerView: '2', //何枚表示するか
   speed: 2000, // スライドアニメーションのスピード(ミリ秒)
   centeredSlides : true,
	autoplay: { //自動再生する
		delay: 2500, //次のスライドに切り替わるまでの時間
      disableOnInteraction: false, //ユーザーが操作したら止めるか
      waitForTransition: false, // アニメーションの間にスライドを止めるか
	},
   //ページネーション表示の設定
   pagination: { 
     el: '.swiper-pagination', //ページネーション要素のクラス名
     clickable: true, //クリック可能にするか
     type: 'bullets', //ページネーションの種類
   },
  
   //ナビゲーションボタン(矢印)表示の設定
   navigation: { 
     nextEl: '.swiper-button-next', //「次へボタン」要素のクラス名
     prevEl: '.swiper-button-prev', //「前へボタン」要素のクラス名
   },
 });

設定できる内容は公式サイトを参照ください。

パララックス(視差効果)スライダー

パララックススライダーのデモ画面

上記リンク先のデモのように、パララックスのスライダーを簡単に実装することができます。

HTML

<div class="swiper">
   <div class="swiper-wrapper">
      <div class="swiper-slide">
         <img src="画像の場所" data-swiper-parallax-x="100%" data-swiper-parallax-scale="1.1">
         <div class="texts" data-swiper-parallax-x="50%" data-swiper-parallax-opacity="0">
            <p class="title" data-swiper-parallax-x="-50%" data-swiper-parallax-duration="1000">京都</p>
            <p data-swiper-parallax-x="-50%" data-swiper-parallax-duration="1100">京都は日本で最もポピュラーな観光地の一つで、古風で綺麗な日本の風景を楽しむことができます。</p>
         </div>
      </div>
      <div class="swiper-slide">
         <img src="画像の場所" data-swiper-parallax-x="100%" data-swiper-parallax-scale="1.1">
         <div class="texts" data-swiper-parallax-x="50%" data-swiper-parallax-opacity="0">
            <p class="title" data-swiper-parallax-x="-50%" data-swiper-parallax-duration="1000">横浜</p>
            <p data-swiper-parallax-x="-50%" data-swiper-parallax-duration="1100">横浜は夜景を楽しむことができる綺麗な街です。</p>
         </div>
         </div>
      <div class="swiper-slide">
         <img src="画像の場所" data-swiper-parallax-x="100%" data-swiper-parallax-scale="1.1">
         <div class="texts" data-swiper-parallax-x="50%" data-swiper-parallax-opacity="0">
            <p class="title" data-swiper-parallax-x="-50%" data-swiper-parallax-duration="1000">吉祥寺</p>
            <p data-swiper-parallax-x="-50%" data-swiper-parallax-duration="1100">吉祥寺は人気の街で、一部にはどこか日本人がノスタルジーを感じるような飲み屋街もあります。</p>
      </div>
   </div>
</div>

CSS

.swiper{
   margin-top: 30px;
   font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

 .swiper-slide {
   width: 100%;
   height: 600px;
   overflow: hidden;
   padding: 2em;
 }
 
 .swiper-slide img {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
 .swiper-slide .texts {
   min-width: 40%;
   max-width: 600px;
   padding: 1.5em 3em;
   background-color: rgba(0, 0, 0, 0.3);
   backdrop-filter: blur(3px);
   color: #fff;
   overflow: hidden;
 }
 
 .swiper-slide .title {
   font-size: 2.5rem;
   margin: 0;
 }

JavaScript

const mySwiper = new Swiper ('.swiper', {

   parallax: true, //パララックスにするか

   speed: 1500,
   autoplay: { //自動再生する
      delay: 5000, //次のスライドに切り替わるまでの時間
   },
   allowTouchMove: true, //フリック可能にするか
   loop: true, //最後に達したら先頭に戻る
   centeredSlides : true, // アクティブなスライドをセンターにするか
 });

これだけです。

肝は、

  • JavaScriptの設定でparallax: trueにする
  • HTMLのdata-swiper-parallax-xプロパティ

だけです。すごいですね、swiper。
これもsplideだと現時点、できません。

まとめ

カルーセルスライダーを作るときの選択肢と、高機能でjQuery不要のswiperの使い方をご説明しました。

著者のイメージ画像

BringFlower|稲田 高洋

2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。2010~2018年に人間中心設計専門家を保有。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。2022年3月にBringFlowerを開業し、SEOコンサル、デザイン、ウェブ制作を一手に受ける。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。