実装したのはかなり前の事なのですが、このライブラリは本当に便利なのでおすすめ！
「Swiper」という、スライダーを簡単に実装できるライブラリで、画像だけでなく要素を表示することもでき、またページネーションやナビゲーションも容易に追加できます。
公式サイトはこちらから。
Swiper – The Most Modern Mobile Touch Slider
https://swiperjs.com/#.WLkGRRLyhTY
なお、今回は React での実装方法について紹介します。
まず、下記の npm コマンドを使ってライブラリをインストールします。
npm i swiper --save
次に、スライダーを実装したいページで下記のように必要なファイルをインポートしていきます。
私は今回、ページネーションも使いたかったので下記のように指定しています。
import SwiperCore, { Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.scss';
import 'swiper/components/pagination/pagination.scss';
SwiperCore.use([Pagination]);
あとは、スライダーを表示したい箇所で下記のように指定すればOKです。
<Swiper
spaceBetween={0}
slidesPerView={1}
pagination={{ clickable: true }}>
<SwiperSlide>
<img src="[表示したい画像のパス]" />
</SwiperSlide>
<SwiperSlide>
<img src="[表示したい画像のパス]" />
</SwiperSlide>
<SwiperSlide>
<img src="[表示したい画像のパス]" />
</SwiperSlide>
</Swiper>
今回は、画面に要素を1つずつ表示し、要素間のスペースは 0 としています。
上記のサンプルコードでは 2、3行目で指定しているのがそうです。
2行目の spaceBetween で、要素間の余白を指定できます。
3行目の slidesPerView では、画面に一度に表示する要素の数を指定できます。
今回は 1 を指定しているので、1枚ずつ画像が表示されていますが、これを例えば 3 にすると、一度に 3枚の画像が画面に表示されます。
また、4行目ではページネーションの指定をしています。
clickable に true を指定することで、ページネーションのクリックでスライダーを遷移させることができるようにしています。
そして、スライダーに表示したい画像は <SwiperSlide> 要素で囲って指定します。
なお、この時表示する要素は画像だけでなく、<p> タグで囲った文字列などでも問題ありません。
また、文字列と画像など、複数の要素を指定しても大丈夫でした。
実装については以上です。
今回は、ページネーションしか追加していませんのでこんな感じのコードになりましたが、他にもスライダーの両端にナビゲーションの矢印を追加したり、スクロールバーを追加したりもできます。
また、画面遷移時のアニメーションを変更したり、ループ表示させたり、自動で次の要素に遷移させたりすることもできます。
また、スライダーの方向を縦方向に変更することもでき、それを使ってスライダーの中にスライダーを追加することもできるようでした。
こんな感じで、かなり色々なことができるライブラリなので、スライダーの実装がしたい場合は、是非導入をご検討ください！
今回は React で書きましたが、勿論 HTML と JavaScript で記述することも可能です！
以上、モダンなスライダーを簡単に実装できるライブラリ「Swiper」のご紹介でした。
ご参考になれば幸いです。
