スライダーを作成するライブラリは沢山ありますが、その中の一つであるSwiper.jsはjQueryを使わずに実装できるのが魅力のひとつです。
当記事ではSwiper.jsをReactで使う方法について記します。
※Reactについてはご存じの前提で進めさせていただきます。
①Swiperをインストール
npm i swiper@8現時点（2023年9月時点）で最新バージョンは10ですが、8が一番安定しているのはないかなと私は思います。
②一番シンプルなスライダーコンポーネント
まずは、なんのオプションも使用しない一番シンプルなスライダーコンポーネントを作成してみましょう。
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/css'
import './style.css'
export default function SampleSlider() {
return (
<Swiper
className="sample-slider"
>
<SwiperSlide><img src="/img/sample1.png" /></SwiperSlide>
<SwiperSlide><img src="/img/sample2.png" /></SwiperSlide>
<SwiperSlide><img src="/img/sample3.png" /></SwiperSlide>
</Swiper>
)
}.sample-slider {
width: 70%;
}
.sample-slider img {
width: 100%;
}
シンプルなスライダーができました。
スワイプするとスライドが動くと思います。
③ナビゲーションを追加する
Swiper.jsでは左右の矢印をナビゲーションといいます。
ナビゲーションを追加するには以下の4つの事を行います。
・Navigationモジュールのインポート
・navigationスタイルのインポート
・modulesプロパティにNavigationモジュールを指定
・navigationプロパティを指定
import { Swiper, SwiperSlide } from 'swiper/react'
import { Navigation } from 'swiper' //追記
import 'swiper/css/navigation' //追記
import 'swiper/css'
import './style.css'
export default function SampleSlider() {
return (
<Swiper
className="sample-slider"
modules={[Navigation]} //追記
navigation //追記
>
<SwiperSlide><img src="/img/sample1.png" /></SwiperSlide>
<SwiperSlide><img src="/img/sample2.png" /></SwiperSlide>
<SwiperSlide><img src="/img/sample3.png" /></SwiperSlide>
</Swiper>
)
}
ナビゲーション（矢印）が表示されました。
④ページネーションを追加する
Swiper.jsでは現在のスライド位置を示すドットをページネーションといいます。
ページネーションを追加するには以下の4つの事を行います。
・Paginationモジュールのインポート
・paginationスタイルのインポート
・modulesプロパティにPaginationモジュールを指定
・paginationプロパティを指定
import { Swiper, SwiperSlide } from 'swiper/react'
import { Navigation, Pagination } from 'swiper' //修正
import 'swiper/css/navigation'
import 'swiper/css/pagination' //追記
import 'swiper/css'
import './style.css'
export default function SampleSlider() {
return (
<Swiper
className="sample-slider"
modules={[Navigation, Pagination]} //修正
navigation
pagination //追記
>
<SwiperSlide><img src="/img/sample1.png" /></SwiperSlide>
<SwiperSlide><img src="/img/sample2.png" /></SwiperSlide>
<SwiperSlide><img src="/img/sample3.png" /></SwiperSlide>
</Swiper>
)
}
ページネーション（ドット）が表示されました。
⑤スライダーをループさせる
よく使われるオプションの一つとしてループオプションがあります。
有効化することで、最後のスライドの続きに最初のスライドが再び来るようになります。
loop={true}を追加します。
import { Swiper, SwiperSlide } from 'swiper/react'
import { Navigation, Pagination } from 'swiper'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css'
import './style.css'
export default function SampleSlider() {
return (
<Swiper
className="sample-slider"
modules={[Navigation, Pagination]}
navigation
pagination
loop={true} //追記
>
<SwiperSlide><img src="/img/sample1.png" /></SwiperSlide>
<SwiperSlide><img src="/img/sample2.png" /></SwiperSlide>
<SwiperSlide><img src="/img/sample3.png" /></SwiperSlide>
</Swiper>
)
}
スライダーがループするようになりました。
⑥スライダーを自動再生にする
よく使われるオプションとしてもう一つ自動再生オプションがあります。
自動再生もナビゲーションなどと同様にモジュールをインポートする必要があります。
delayの数値で次のスライドに切り替わるまでの時間が決まります。
以下の場合は2秒ごとにスライドが自動で切り替わります。
import { Swiper, SwiperSlide } from 'swiper/react'
import { Navigation, Pagination, Autoplay} from 'swiper' //修正
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css'
import './style.css'
export default function SampleSlider() {
return (
<Swiper
className="sample-slider"
modules={[Navigation, Pagination, Autoplay]} //修正
navigation
pagination
loop={true}
autoplay={{ delay:2000 }} //追記
>
<SwiperSlide><img src="/img/sample1.png" /></SwiperSlide>
<SwiperSlide><img src="/img/sample2.png" /></SwiperSlide>
<SwiperSlide><img src="/img/sample3.png" /></SwiperSlide>
</Swiper>
)
}
スライダーが自動再生になりました。
ソースコード全文
最後にソースコード全文を載せておきます。
npm i swiper@8import { Swiper, SwiperSlide } from 'swiper/react'
import { Navigation, Pagination, Autoplay} from 'swiper'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css'
import './style.css'
export default function SampleSlider() {
return (
<Swiper
className="sample-slider"
modules={[Navigation, Pagination, Autoplay]}
navigation
pagination
loop={true}
autoplay={{ delay:2000 }}
>
<SwiperSlide><img src="/img/sample1.png" /></SwiperSlide>
<SwiperSlide><img src="/img/sample2.png" /></SwiperSlide>
<SwiperSlide><img src="/img/sample3.png" /></SwiperSlide>
</Swiper>
)
}.sample-slider {
width: 70%;
}
.sample-slider img {
width: 100%;
}
以上、Swiper.jsをReactで使う方法でした！
