[신입17] JQuery Slider Plugin - AutoPlay (Slick, Swiper, bxSlider)

1. Slick

다른 부분은 다 동일하고 AutoPlay 기능과 시작, 정지 버튼을 추가한다.

HTML & JS

$('.test').slick({
  autoplay: true, // AutoPlay 기능 추가
  autoplaySpeed: 2000
});

<button class="play">시작</button>
<button class="pause">정지</button>

$('.play').on('click', function() {
  $('.test').slick('slickPlay');
});
$('.pause').on('click', function() {
  $('.test').slick('slickPause');
});

버튼의 기능은 setting에서 참고하여 추가하면 된다.

2. Swiper

// AutoPlay 기능 추가
var swiper = new Swiper('.swiper-container', {
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
});

<!-- 버튼 추가 -->
<div class="btns">
  <button class="start">시작</button>
  <button class="stop">정지</button>
</div>

// 버튼 기능 추가
$('.start').on('click', function() {
  swiper.autoplay.start();
  return false;
});
$('.stop').on('click', function() {
  swiper.autoplay.stop();
  return false;
});

3. bxSlider

bxSlider는 Swiper와 Slick처럼 시작과 정지 버튼을 추가해도 되지만 기본 옵션으로도 만들 수 있다. 정말 다양한 옵션들이 내장되어 있다.

버튼 추가

var slide1 = $('.slider').bxSlider({
  auto: true,
  pause: 2000
});
$('.controls .play').on('click', function() {
  slide1.startAuto();
});
$('.controls .pause').on('click', function() {
  slide1.stopAuto();
});

옵션 추가

$(document).ready(function(){
  $('.slider').bxSlider({
    auto: true,
    autoControls: true,
    stopAutoOnClick: false
  });
});

---

© 마침

• 한물간 언어로 PHP를, 한물간 Plugin으로 JQuery를 뽑아서 두 개 다 하고 싶지 않았는데 우리 회사에서는 두 개 다 사용하고 있었다. 그런데 배워보니 둘 다 좋고 재미도 있다. 이런... PHP의 재미를 붙이니까 개발자분이 그러면 안 된다고 ㅋㅋㅋ
• JQuery Slider Plugin의 친절함과 많은 데모가 좋다. 리베하얀님에게 단순한 사용법을 배웠지만, 훨씬 많은 것들을 활용할 수 있겠다는 자신감이 생긴다.

---

참고: 리베하얀 - JQuery Plugin