[slick] slider 실행 시 콜백(callback) 이벤트

슬릭(slick) 슬라이더(slider) 실행 전/후 콜백(callback) 이벤트

[html]

<div class="my-slider">

  <div class="item">item01</div>

  <div class="item">item02</div>

  <div class="item">item03</div>

  <div class="item">item04</div>

  <div class="item">item05</div>

</div>

<p></p>

 

[css]

.my-slider {

  position: relative;

}

.my-slider .slick-slide {

  height: 100px;

  border: 1px solid blue;

  box-sizing: border-box;

  text-align: center;

}

.slick-arrow {

  position: absolute;

  bottom: -30px;

  left: 0;

}

.slick-arrow.slick-next {

  left: 80px;

}

p {

  font-size: 30px;

  text-align: center;

}

 

[js]

$('.my-slider').slick({

    infinite: true,

    slidesToShow: 3,

    slidesToScroll: 1,

    speed: 3000,

  });

// 슬라이드 시작 전

$('.my-slider').on('beforeChange', function(){

  $('p').html('슬라이드 시작');

});

// 슬라이드 완료 후

$('.my-slider').on('afterChange',function(){

  $('p').html('슬라이드 완료');

});

 

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