当記事ではswiper.jsとReactを使用して、自動で流れ続ける無限ループスライダーを作成する方法について記します。
Swiper.jsとReactの基本的な使い方はご存じの前提で進めさせていただきます。
ReactでSwiperスライダーを作るのが初めての場合はこちらから先に参考いただければと思います。
Swiper.jsをReactで使う方法
目次
①矢印とドットのないスライダーを作成する
Swiper8を使用しています。
理由としては、Swiper9と10はオプションのloopとslidesPerViewを併用した時にうまく動かないためです。
npm i swiper@8
自動で流れ続けるスライダーなので、矢印とドットはいりません。
loopオプションをtrueにしておきます。
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/css'
import './style.css'
export default function SampleSlider() {
return (
<Swiper
className="sample-slider"
loop={true}
>
<SwiperSlide><img src="/img/sample1.png" /></SwiperSlide>
<SwiperSlide><img src="/img/sample2.png" /></SwiperSlide>
<SwiperSlide><img src="/img/sample3.png" /></SwiperSlide>
<SwiperSlide><img src="/img/sample4.png" /></SwiperSlide>
</Swiper>
)
}.sample-slider {
width: 70%;
}
.sample-slider img {
width: 100%;
}矢印とドットのないスライダーができました。
スワイプでスライドを動かせると思います。
②スライドを自動再生にする
autoplayオプションでスライドを自動再生にします。
autoplayを有効にするにはモジュールをインポートする必要があります。
止まる事なく動かしたいので、delayを0にします。
下記のように3行追記します。
import { Swiper, SwiperSlide } from 'swiper/react'
import { Autoplay } from 'swiper' // 追記
import 'swiper/css'
import './style.css'
export default function SampleSlider() {
return (
<Swiper
className="sample-slider"
modules={[Autoplay]} // 追記
autoplay={{delay:0}} // 追記
loop={true}
>
<SwiperSlide><img src="/img/sample1.png" /></SwiperSlide>
<SwiperSlide><img src="/img/sample2.png" /></SwiperSlide>
<SwiperSlide><img src="/img/sample3.png" /></SwiperSlide>
<SwiperSlide><img src="/img/sample4.png" /></SwiperSlide>
</Swiper>
)
}自動再生のスライダーができました。
③スライドスピードと表示枚数を設定する
speedオプションでスライドスピードを、slidesPerViewオプションで表示枚数を設定します。
import { Swiper, SwiperSlide } from 'swiper/react'
import { Autoplay } from 'swiper'
import 'swiper/css'
import './style.css'
export default function SampleSlider() {
return (
<Swiper
className="sample-slider"
modules={[Autoplay]}
loop={true}
autoplay={{delay:0}}
slidesPerView={3} // 追記
speed={3000} // 追記
>
<SwiperSlide><img src="/img/sample1.png" /></SwiperSlide>
<SwiperSlide><img src="/img/sample2.png" /></SwiperSlide>
<SwiperSlide><img src="/img/sample3.png" /></SwiperSlide>
<SwiperSlide><img src="/img/sample4.png" /></SwiperSlide>
</Swiper>
)
}④スライドの動きをスムーズにする
CSSに下記のように追記してスライドの動きをスムーズにします。
.sample-slider .swiper-wrapper{
transition-timing-function: linear;
}自動で流れ続ける無限ループスライダーができました！
⑤ホバー時に自動再生を停止する
サイトの閲覧者の中にはもしかしたら、自動再生を止めて特定のスライドに集中したい人もいるかもしれません。
そんな方のために無限ループスライダーをより改善しましょう。
pauseOnMouseEnter:trueを追加することで、ホバー時に自動再生を止められます。
disableOnInteraction:falseを追加する事で、ホバーを外したときに自動再生を再開できます。
autoplay={{
delay:0,
pauseOnMouseEnter: true, // 追記
disableOnInteraction: false, // 追記
}}
ホバー時に自動再生が停止し、ホバーが解除されると再開します。
即座に停止するのではなく、スライドの切り替えが終了した時点で停止します。
⑥自動再生の方向を逆向きにする
autoplaオプションの中にreverseDirection: trueを追加することで、自動再生を逆向きにすることができます。
autoplay={{
delay:0,
pauseOnMouseEnter: true,
disableOnInteraction: false,
reverseDirection: true, // 追加
}}
自動再生が逆向きになりました。
ソースコード全文
最後にソースコードを全文載せておきます。
npm i swiper@8 import { Swiper, SwiperSlide } from 'swiper/react'
import { Autoplay } from 'swiper'
import 'swiper/css'
import './style.css'
export default function SampleSlider() {
return (
<Swiper
className="sample-slider"
modules={[Autoplay]}
loop={true}
autoplay={{
delay:0,
pauseOnMouseEnter: true, // ホバーした時に自動再生を停止する
disableOnInteraction: false, // ホバー外した時に自動再生を再開する
reverseDirection: true, // 自動再生を逆向きにする
}}
slidesPerView={3}
speed={3000}
>
<SwiperSlide><img src="/img/sample1.png" /></SwiperSlide>
<SwiperSlide><img src="/img/sample2.png" /></SwiperSlide>
<SwiperSlide><img src="/img/sample3.png" /></SwiperSlide>
<SwiperSlide><img src="/img/sample4.png" /></SwiperSlide>
</Swiper>
)
}.sample-slider {
width: 70%;
}
.sample-slider img {
width: 100%;
}
.sample-slider .swiper-wrapper{
transition-timing-function: linear;
}以上、swiper.jsとReactを使用して自動で流れ続ける無限ループスライダーを作成する方法でした。
