わたくしといふ現象は

仮定された有機交流電燈の

ひとつの青い照明です

HTML


<div class="sample sample04">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <p class="catch01">わたくしといふ現象は</p>
      </div>
      <div class="swiper-slide">
        <p class="catch02">仮定された有機交流電燈の</p>
      </div>
      <div class="swiper-slide">
        <p class="catch03">ひとつの青い照明です</p>
      </div>
    </div>
      
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

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

CSS


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

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

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

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

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

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

JavaScript


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

  for (var i = 0; i < anim.length; i++ ) {
    anim[i].classList.remove('is-anim');
  }
  el.classList.add('is-anim');
};

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