swiperでアニメーションを実装

はじめに

今日はjQueryプラグインswiperのカスタマイズ（スライドのタイミングでコンテンツを１回アニメーション）について紹介したいと思います。

swiperでアニメーションを実装

index.html

<div class="sample sample1">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <p class="catch01">aaaaa</p>
      </div>
      <div class="swiper-slide">
        <p class="catch02">bbbbbb</p>
      </div>
      <div class="swiper-slide">
        <p class="catch03">ccccc</p>
      </div>
    </div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <div class="swiper-pagination"></div>
  </div>
</div>

style.css

.sample1 .swiper-slide {
  cursor: pointer;
}

.sample1 .swiper-slide {
  height: 200px;
  display: flex;
  justify-content: center;
}

.sample1 .swiper-slide p {
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(10px);
}

.sample1 .swiper-slide .is-anim {
  transition: .6s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 1;
  transform: translateY(0px);
}

.sample1 .swiper-button-prev,
.sample1 .swiper-button-next {
  display: none;
}

@media (min-width: 768px) {
  .sample04 .swiper-button-prev,
  .sample04 .swiper-button-next {
    display: block;
  }
}

index.js

var swiper1Anim = function() {
  var el = document.querySelector('.sample1 .swiper-slide-active p');
  var anim = document.querySelectorAll('.is-anim');

  el.classList.add('is-anim');
};

window.addEventListener('DOMContentLoaded', function() {
  var swiper1 = new Swiper('.sample1 .swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    loop: true,
    onInit: function() {
      swiper1Anim();
    },
    onSlideChangeEnd: function() {
      swiper1Anim();
    }
  });
}, false);

終わり

今回はjQueryプラグインのカスタマイズの一例を紹介しました。
他のプラグインを使うときにカスタマイズできるようになると自信がつくのではないでしょうか。
明日も頑張ります。