以前、Swiperの矢印をカスタマイズという記事を書きましたが、これはオプション（Module）のnavigationを使って実装しました。しかしこの方法だと矢印をスライドの外側に出すことができませんでした。

Swiperの矢印をカスタマイズ

.swiper（v6までは.swiper-container）のコンテナ要素にはoverflow: hidden;のstyleが適用されているため、コンテナ要素からはみ出ると表示されなくなります。

そこで今回はオプション（Module）のnavigationを使わずに矢印を実装することで、コンテナ要素の外に矢印を設置し、スライドの外側に出ても問題ないようにします。

ここで使っているswiperのバージョンは7.0.6です。
swiperのバージョン6以前とは異なる箇所があります。swiper公式をご確認ください。

navigationを使って実装した場合（失敗例）

実際にnavigationを用いて、スライダーの外側に矢印が出るように表示した例を制作しました。

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

スライドの真ん中両端に「前へボタン」と「次へボタン」を設置していますが、途中で切れているのがわかります。

これを防ぐためには、「前へボタン」と「次へボタン」となる要素を、.swiper（v6までは.swiper-container）のコンテナ要素の外側に出して設置する必要があります。

コンテナ要素から出すとオプション（Module）のnavigationは使えません。

そこで下記ではnavigationを使わずに「前へボタン」と「次へボタン」を設置する方法を説明します。

navigationを使わず実装

こちらが今回制作したデモです。
先程と違って、「前へボタン」と「次へボタン」の矢印がしっかり表示されているのがわかります。

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

htmlの変更点は矢印となる要素が.swiperの要素の中にあるか、外にあるかだけです。

javascriptは通常のnavigationを使用した場合とだいぶ異なるので、次で説明していきます。

javascriptコード

(function(){
  const prevButton = document.querySelector('.slider__prev');
  const nextButton = document.querySelector('.slider__next');
  const mySwiper = new Swiper('.my-swiper');
  prevButton.addEventListener('click',()=>{
     mySwiper.slidePrev();
  });
  nextButton.addEventListener('click',()=>{
     mySwiper.slideNext();
  });
  const buttonIsEdge = ()=>{
    if( mySwiper.isBeginning ){
      prevButton.classList.add('is-edge');
    }else{
      prevButton.classList.remove('is-edge');
    }
    if( mySwiper.isEnd ){
      nextButton.classList.add('is-edge');
    }else{
      nextButton.classList.remove('is-edge');
    }
  }
  buttonIsEdge();
  mySwiper.on('slideChange',()=>{
    buttonIsEdge();    
  });
})();

コードをポップアップで見る

下記のコード説明は「コードをポップアップで見る」で確認しながら、読んでください。

5〜7行目、prevButtonをクリックしたら、1つ前へのスライドへ戻る処理です。

8〜10行目、nextButtonをクリックしたら、1つ先のスライドへ進む処理です。

11〜22行目、buttonIsEdge関数を定義しています。prevButtonは1枚目のスライドの時に「is-edge」のクラスが付くように、nextButtonは最後のスライドの時に「is-edge」のクラスが付くようにしています。

24〜26行目、スライドが切り替わる度にbuttonIsEdge関数を呼び出しています。

スライドより外側に矢印を出すことは結構あることなので、その時にはぜひ参考にしてください。