Swiperの矢印をカスタマイズ

この記事とは違う方法でカスタマイズする方法の記事も書きました。
この記事の方法で上手く実装できない場合はこちらも参考にしてみてください。

Swiperの矢印のカスタマイズ方法について紹介していきます。

早速ですが、制作したものは以下のものです。

単にカスタマイズするだけでは、簡単なのでスライドが切り替わるボタンを１つだけではなく、２つ設置しています。

下記が今回のjavascriptです。

const mySwiper = new Swiper('.swiper-container', {
  navigation: {
    prevEl: '.slidePrev-btn',
    nextEl: '.slideNext-btn'
  }
});

javascriptは簡単です。
矢印に関するオプションはnavigationなので、そのオプションを追加しているだけです。

prevEl が１つ前のスライドに切り替わるボタン要素のclass、
nextEl が１つ後ろのスライドに切り替わるボタン要素のclassを設定します。

classの設定なので、例のように複数設置することも可能です。

カスタマイズ性に優れていてSwiperは使いやすいですね。

次回もSwiperをカスタマイズした記事を書きたいと思います。

searchKeywords