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

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

See the Pen swiper navigation custom by takblog (@blanks-site) on CodePen.

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

下記が今回のjavascriptです。

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

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

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

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


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

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