[slick] slider에서 재생 / 정지 버튼 추가

slick slider(슬릭 슬라이더)에서 오토 슬라이드 재생 / 정지 버튼 추가하기

[html]

<div class="slick-test">

      <div></div>

      <div></div>

      <div></div>

      <div></div>

    </div>

   

    <div>

      <button type="button" class="play">재생</button>

      <button type="button" class="stop">정지</button>

    </div>

 

[css]

.slick-test{

  width: 600px;

  overflow: hidden;

  outline: 1px solid blue;

}

.slick-test .slick-list{

  margin: 0 -10px;

}

.slick-test .slick-slide{

  height: 200px;

  margin: 0 10px;

  background: skyblue;

}

 

[js]

$(document).ready(function(){

  $('.slick-test').slick({

    slidesToShow: 3,

    slidesToScroll: 1,

    arrows: false,

    autoplay: true,

    autoplaySpeed: 1000,

  });

  // 재생/정지 버튼 컨트롤

  $('.play').click(function(){

    $('.slick-test').slick('slickPlay');

  });

  $('.stop').click(function(){

    $('.slick-test').slick('slickPause');

  });

});

 

See the Pen [slick] slider play/pause button _ 슬릭 슬라이더 재생/정지 버튼 추가 by Jinsik Son (@Jinsik-Son) on CodePen.