SwiperでX番目表示時に処理をする

こんにちは、むったん（@6ttan）です。

先日カルーセルの上にボタンを設置して、最後のスライドが表示されたらそのボタンを消したい…という案件がありました。

MutationObserverで要素の監視をすればいけるかな…と試したのですが上手くいかず。
Swiperのパラメータにもobserverなどがあるので試しましたが、こちらも上手くいかず。

色々調べるとonを使用してイベントに関する記述をすれば上手くいったので、備忘録も兼ねてご紹介します。

最後のスライドが表示されたらボタンを消す

上記ではざっくり述べましたが、やりたいこととしては…

①swiperを利用したカルーセル（縦スク）を設置
②カルーセルの上にリンクを表示（他ページへ遷移可能）
③カルーセル最後の1枚の時にリンクを非表示

という内容になります。

デモ

See the Pen
Untitled by むったん (@6ttan)
on CodePen.0

コード

HTML

<div class="swiper mySwiper content">
  <div class="btn js-btn">
    <a href="#">btn</a>
  </div>

  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
</div>

CSS

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content {
  position: relative;
}

.btn {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.btn a {
  width: 200px;
  height: auto;
  line-height: 30px;
  color: #fff;
  background: steelblue;
  border-radius: 5px;
  display: block;
  text-decoration: none;
  text-align: center;
}

.btn.is-hidden {
  display: none;
}

.btn.is-hiddenで非表示時のスタイルを準備しておきます。

JS

let btn = document.querySelector('.js-btn');
var mySwiper = new Swiper('.mySwiper', {
  direction: "vertical",
  mousewheel: {
    invert: true,
  },
  on: {
  // 切り替わりのアニメーションが終了したとき
    slideChangeTransitionEnd: function() {
      swipe_action();
    },
  }
});

function swipe_action() {　
  if (mySwiper.activeIndex == 3) {
    btn.classList.add('is-hidden');
  } else {
    btn.classList.remove('is-hidden');
  }
}

slideChangeTransitionEndの部分ですが、これはコメント通りカルーセルの切り替わりのアニメーションが終わったら定義した関数を呼び出します。

slideChangeTransitionStartとすれば、カルーセルの切り替わりのアニメーションが始まる前に定義した関数を呼び出します。

関数swipe_action()では4枚目（スタートは0なので、最後の4枚目は3）では.is-hiddenを付与し、それ以外では外すとしています。

参考：Swiper API – Event

さいごに

Swiperのクラスが変わる部分で監視をしようとしたり、色々試しましたが上手くいかなかったのですが。。。
なんとかスッキリ形にできてよかったです！

それでは！