軽量！日本人にも優しい！splideでスライダーを作ろう！

フロントエンドエンジニアのフジオカです。

先日ナナサンのホームページがフルリニューアルしました！ファーストビューの表示（トップページアクセス時に表示される宇宙の表現）、かっこいいですよね！私はこれ見たさにリニューアルしてから1日1回は見てます。

まだまだひよっこですがこんな風に感動できる表現ができるように日々！勉強！です！

今回のブログでは、ナナサンリニューアルの際にスライダー表示に利用したライブラリsplideを自分の備忘録もかねてご紹介します。

splideについて

他ライブラリに依存しない、splideひとつでスライダーが実装できるライブラリです。このブログ執筆時点の2023年11月時点ではバージョン4.1.4が最新版になります。
開発者の方が日本人なので、公式のドキュメントが日本語でも分かりやすいです。これがとってもありがたい！オプションも豊富なのでカスタマイズもやりやすいです。
また、他の有名スライダーライブラリ（slick、swiper）に比べて軽量な仕様になっています。

splideの日本語公式ページは下記からどうぞ！
https://ja.splidejs.com/

基本の使い方

ドキュメントに記載されている「基本的な使い方」に沿って設置すればOKです。
初期状態で前後の矢印とページネーションがついているのは便利！

See the Pen splideライブラリの基本 by fuji (@fujisanasijuf) on CodePen.

複数設置するときにはクラスの「splide」にスライダーごとに別のクラスを付与してそれぞれにインスタンスを付与します。もし設定がうまくいっていない場合は、.splideのクラスに「overflow: hidden;」が当たるようになっているので、スライダーがあるべき場所に表示されない…というときにはセレクタが正しく設定されているか確認しましょう。（私は初めて複数使ったときに表示されずここで焦りました笑）

カスタム例紹介

カスタム例としてリニューアルしたナナサンサイトでの使用例をご紹介します。

横に流れつづけるスライダー

splideでは拡張機能ライブラリを追加することで横に流れ続けるスライド（自動スクロール）も簡単に作成できます。
自動スクロール導入の詳細はこちら
splideが軽量だからなのか、以前使用した他ライブラリと比較して（個人的にですが）スムーズでカクつきもあんまり感じず流れている印象があります。

See the Pen splide 横に自動で流れ続けるサンプル by fuji (@fujisanasijuf) on CodePen.

ナナサンではトップページの下部に使用しています。
https://nanasaninc.com/

スライドと番号が連動して動くスライダー

画像と番号が一緒に変わるので、今何枚目のスライドを見ているのかがページネーションよりも視覚的にわかりやすいですね！
作り方はスライダーを二つ用意して、インスタンスプロパティのSplide#sync()でスライドの動きを同期させています。
例では文字が同期して動いてますが、文字の部分を画像にしてサムネイル表示にすることも可能です。また独立したスライダーなのでスタイルを調整すれば柔軟なレイアウトにすることもできます！アイデア次第！

See the Pen splide スライドと番号が連動して動くスライダーサンプル by fuji (@fujisanasijuf) on CodePen.

ナナサンでは会社概要のオフィスギャラリーで使用しています。
https://nanasaninc.com/company/

個人的使用感

同じく単独で動くswiperと比べるとスライド時の表現は少なめですが、スライダーに最低限必要な要素がちゃんと備わっており、なにより軽量なのがとても魅力的だと思います。私はswiper派だったのですが知ってからはsplideを極めたいと何かと使用中…！
ちょっと複雑なスライド表現は他ライブラリと比べるとネックですが、通常のカルーセルの動きはスムーズなので、スライドのライブラリを検討中の方にはオススメです！