JavaScript
素のJavaScriptでカルーセルスライダーを作る選択肢とswiperの使い方
フリックすると左右に画像が切り替わるカルーセルスライダーを作る方法について、現況における選択肢をまずご説明した上で、最適だと私が思う方法をご紹介します。
結論としては、ライブラリは利用。ライブラリの中では、jQueryなし、つまり素のJavaScriptベースのみで作れるからということと、カスタマイズ性の高さ、完成度の高さでswiperを利用するのが良いと考えています。
カルーセルスライダーを作るための選択肢
ライブラリは色々ありますが、カルーセルスライダーを作る方法として、以下の５つが私にとっての選択肢でした。
slick（jQuery利用）
使いやすいようです。ただ、jQueryを利用していない私にとって、これだけのためにjQueryを読み込むのは無念でならないですし、それを抜きにしても、次のswiperに比べて、スマホでフリックした際の反応が悪いという評判をいくつか見ました。
なので、slickは実際に試すところまでやってないです。
swiper
swiperは、slickに比べると利用難度が高いようですが、カスタマイズ性はslickよりも高く、上述の通り、フリック時の反応も良いという評判。そして何より、jQueryに依存しないのでjQueryを読み込まなくても済みます。
Flickty
これもjQuery不要で、試したのですが非常に使いやすく簡単に実装ができました。ただ、最近ベータ版から正式版になったばかりで、表示に関するバグらしき症状を確認しています。横幅によっては表示がおかしくなります。コントロール類のボタン配置にも制約がありました。
今後には期待できると感じられるものでした。
splide
splideもjQuery不要で、さらに素晴らしいのは非常にファイルが軽いということ。jsファイルが28.9KBです。本記事で使い方まで紹介する上述のswiperはjsファイルが139KBで結構重いので、この点ではsplideが良いです。
また、aria-labelや、Live Regionsというアクセシビリティのための仕様であるWAI-ARIAに対応しています。アクセシビリティに配慮する姿勢も素晴らしいです。ただ私は、アクセシビリティ対応はこれ使わなくてもできます。大事なのは、スライダーで示している情報がスクリーンリーダーユーザーにも伝わるかどうか、そもそも伝えるべきなのかどうか、というところをちゃんと考えることです。Live Regionsは、動的に変化する部分をその都度スクリーンリーダーユーザーに伝えるということをするものなので、Live Regionsをカルーセルスライダーに適用するのは、良くない場合も多いと思います。いちいち伝えられると邪魔になる場合が多いように思うからです。必要な要件としては、スクリーンリーダーユーザーであっても、キーボード操作のみであっても、全ての要素を把握できるか、ということだと思います。
課題はさておき、もうひとつメリットが、日本人が開発しているので、ドキュメントが日本語で存在します。
ただ、画像の両脇に画像を少し見せるということができず、その時点で今のところ私は利用したことがありません。作る内容によっては、ファイルが軽いので今後splideを利用することもあると思います。
自作
最後の選択肢、それはもちろん自作です。むしろ何かに依存するというのを避けたい気持ちが強い私はまず最初に考えてみる選択肢です。
- まず最初に自作という選択肢での作り方を考える
- いや、「これはさすがにプラグインだろ」と思う
- プラグインで思うようにカスタマイズできないと気づき、あらためて自作を考える
- 自作を開始して、相当に工数かかると気づく
こういうプロセスを経て、さらに上述の通りライブラリを比較したうえでswiperを利用しているというのが現在です。
swiperの利用例
例えばですが、次のようなスライダーが簡単に実装できます。
swiperの利用方法
それでは、swiperの利用方法についてご説明します。
swiperの読み込み
１）入手して読み込む場合
入手先は変わることがあるようなので、上記リンク先のページを見た方が早いかもしれません。現時点では下記ページから入手できます。
ダウンロードできる形になっていないので、コピーするか保存します。
必要なファイルは次の３つのうち２つで、CSSファイルについて、2か3のどちらかを選びます。
- swiper-bundle.min.js
- swiper-bundle.min.css
- swiper.min.css
2はある程度最初からCSSが当たっている分少しファイルが重いわけですが、最初から3で調整していこうとしても、どこにCSSを当てればよいか探るのが大変です。
まずは2でCSSを好きなように当てて、その後、3に変更するという手順がおすすめです。
２）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まではswiperがswiper-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だと現時点、できません。
カルーセルスライダーのメリット
通常、ウェブサイトは縦に動かしながら見ていくものなのに対して、横に流れるカルーセルスライダーはサイトの印象にメリハリをもたらします。
また、ドラッグまたはスワイプにより、直感的に操作できるというメリットもあります。
カルーセルスライダーのデメリット
カルーセルスライダーは、横に続くものがあると気づきながらも、必ずしもユーザーがそれを見ることをせずに縦にスクロールさせてしまうということを想定しておかなければなりません。そもそも、横スクロールの存在に気付かれない可能性もあります。特にPCではなくモバイル端末の場合にそうなる可能性が高いと考えています。
そのため、見てもらいたい優先度が高いものをカルーセルスライダーの2枚目以降に配置することは私の場合推奨していません。
あくまでも、サイトの印象にメリハリを設けるということに主眼を置くべきだと考えています。
なお、このデメリットを解消する手段として、縦スクロールしているにもかかわらず横スクロールさせるという方法があります。
GSAPというライブラリを利用することで実現可能で、その方法もご紹介していますので、よろしければそちらもご参照ください。
まとめ
カルーセルスライダーを作るときの選択肢と、高機能でjQuery不要のswiperの使い方をご説明しました。
株式会社BringFlower
稲田 高洋（Takahiro Inada）