【Swiper】逆回転や縦回転するカルーセルスライダーを作成する方法
Swiperは簡単にスライダーを作成することが出来るプラグインです。
Swiperのカルーセルスライダーの基本は右から左に流れていきますが、実はSwieprには左から右に流れるようになる逆回転や縦回転するカルーセルスライダー作成するための専用オプションが用意されています。
この記事ではで逆回転や縦回転するSwiperのカルーセルスライダーを作成する方法をご紹介したいと思います。
Swiperの基本形
まずは通常のSwiperのカルーセルスライダーの作成方法を見てみましょう。
Swiperインスタンスはこちら。class="swiper"要素がSwiperのカルーセルスライダーになります。
new Swiper('.swiper', {
loop: true,
slidesPerView: 2,
centeredSlides : true,
autoplay: {
delay: 3000,
},
});実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
Swiperで作るカルーセルスライダーはこちらの記事で詳しくご紹介しています。
逆回転するカルーセルスライダー
Swiperのカルーセルスライダーは右から左に流れていきます。
これを左から右に流れるようにするにはreverseDirection:trueをautoplayの中に指定します。
逆回転するカルーセルスライダーのSwiperインスタンスはこちら。
new Swiper('.swiper', {
loop: true,
slidesPerView: 2,
centeredSlides : true,
autoplay: {
delay: 3000,
reverseDirection: true, // 逆回転にするオプション
},
});実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
逆回転するようになったので、左から右に流れるようになりましたね。
縦回転するカルーセルスライダー
続いては、縦回転するSwiperのカルーセルスライダーの作り方です。
縦回転するスライダーの場合はclass="swiper"要素への高さ指定が必須になります。
そして、direction:'vertical'を指定することで縦回転するようになります。
縦回転するスライダーのSwiperインスタンスはこちら。
new Swiper('.swiper', {
loop: true,
slidesPerView: 2,
centeredSlides : true,
direction: 'vertical', // 縦回転にするオプション
autoplay: {
delay: 3000,
},
});実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
縦回転するようになりましたね。
縦回転の基本は下から上に流れるようになっています。
上から下に回転するカルーセルスライダー
上から下に回転するようにするためには縦回転するカルーセルスライダーにreverseDirection:trueを指定して逆回転させる必要があります。
上から下に回転するSwiperインスタンスはこちら。
new Swiper('.swiper', {
loop: true,
slidesPerView: 2,
centeredSlides : true,
direction: 'vertical', // 縦回転スライダーにするオプション
autoplay: {
delay: 3000,
reverseDirection: true, // 逆回転にするオプション
},
});実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
上から下に回転するようになりましたね。
これがSwiperで縦回転するカルーセルスライダーの逆回転の流れになります。
まとめ
いかがでしたか？
Swiperは簡単な指定でカルーセルスライダーの流れる向きを変更することが出来ます。
コピペするだけですぐに動くので是非、使ってみて下さい。
