[swiper] slide 실행 시 콜백(callback) 이벤트

스와이퍼 슬라이드 실행 시 이벤트 설정

[html]

<div class="swiper mySwiper">

  <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 class="swiper-slide">Slide 5</div>

  </div>

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

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

</div>

<p class="text"></p>

 

[css]

.swiper {

  width: 300px; height: 200px;

}

.swiper-slide {

  background: skyblue;

  text-align: center;

}

.text{

  width: 300px; height: 100px;

  margin: 0 auto;

}

 

[js]

var swiper = new Swiper(".mySwiper", {

  navigation: {

    nextEl: ".swiper-button-next",

    prevEl: ".swiper-button-prev",

  },

  speed: 1000,

  loop: true,

  on: {

    slideChange: function(){ // 슬라이드 실행 직전에 작동

    // slideChangeTransitionStart: function(){ // 실행 직후에 작동

      $('.text').append('슬라이드 실행'); // 실행문

    }

  },

});

슬라이드 직전/직후 active되어 있는 슬라이드가 다르므로 필요에 맞는 함수를 사용하여야 한다.

 

See the Pen [swiper] slide callback event function _ 스와이퍼 슬라이드 실행 시 이벤트 by Jinsik Son (@Jinsik-Son) on CodePen.