jQueryを使っていた時によく使っていたスライダーのライブラリ「Swiper」をReactで使ってみました。
先日作った写真のポートフォリオサイトのモーダルで、画像をスライドさせるために使っています。
Reactで使う
Reactでの導入方法もドキュメントに書かれています。この通りやれば導入はできます。
npm i swiper or yarn add swiper
Swiperを使いたいところで以下のように書きます。 swiper.scss
のimportは環境によりますが、Next.jsだとapp.jsx or app.tsxで読み込むようにエラーがでるかもしれません。その時は_appでimportしましょう。また、scssを導入していなければ、 import 'swiper/swiper.min.css'
でOKです。
import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/swiper.scss'; export default () => { return ( <Swiper> <SwiperSlide>Slide 1</SwiperSlide> <SwiperSlide>Slide 2</SwiperSlide> <SwiperSlide>Slide 3</SwiperSlide> <SwiperSlide>Slide 4</SwiperSlide> </Swiper> ); };
オプション
オプションはAPIページに書いてあります。全て試してないですが。
冒頭で紹介した写真サイトでは以下のようにしてみました。
import { Swiper, SwiperSlide } from 'swiper/react' import SwiperCore, { Navigation } from 'swiper' SwiperCore.use([Navigation]) // 省略 <Swiper spaceBetween={50} slidesPerView={1} initialSlide={initialSlide} loop={true} navigation={{ prevEl: '.button_prev', nextEl: '.button_next', }} > <SwiperSlide>Slide 1</SwiperSlide> <SwiperSlide>Slide 2</SwiperSlide> <SwiperSlide>Slide 3</SwiperSlide> <SwiperSlide>Slide 4</SwiperSlide> </Swiper>
オプション | |
---|---|
spaceBetween | スライド間のマージン指定 |
slidesPerView | スライドコンテナで見せるスライドの枚数 |
initialSlide | 最初のスライド番号 |
loop | ループさせるかどうか |
navigation | 左右ナビゲーションの設定 |
initialSlideはモーダルを開いた時にどの画像を表示させるかを設定するために書いてます。画像をクリックするとその画像のindexをinitialSlideに渡すようにしています。
navigationはobjectかbooleanで指定できます。 nativagtion={true}
を指定し、追加で import 'swiper/components/navigation/navigation.scss'
or
import 'swiper/components/navigation/navigation.min.css'
をimportすると、Swiperで用意されている左右の矢印が表示されます。上記のようにオブジェクトでclass名を指定すると、cssでカスタマイズできます。
Paginationも同じようにできるはずです。
さいごに
お世話になってたSwiper、Reactでも便利に使えました。スマホでのフリック操作を実装してくれてるところがありがたいです。面倒なところはこういったライブラリを使うのがいいですね。