본문 바로가기
UX 개발/UX - 슬라이더 (롤링배너)

jQuery Slick 슬라이더에 자동재생/정지 버튼 추가하기

반응형

 

Slick 캐러셀을 사용하여 슬라이더를 재생 및 중지할 수 있는 컨트롤 버튼을 만드는 방법을 설명하겠습니다. 이 작업을 수행하려면 HTML에 버튼을 추가하고 JavaScript/jQuery를 사용하여 슬라이더를 제어해야 합니다. 다음은 단계별 가이드입니다:

1단계: 버튼을 위한 HTML 추가

재생 및 중지 컨트롤 역할을 할 버튼을 HTML에 추가합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <link rel="stylesheet" href="path/to/slick.css">
  <link rel="stylesheet" href="path/to/slick-theme.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="path/to/slick.min.js"></script>
  <style>
    /* 필요한 경우 사용자 정의 스타일 추가 */
  </style>
</head>
<body>
  <div class="slider">
    <div><img src="image1.jpg" alt="이미지 1"></div>
    <div><img src="image2.jpg" alt="이미지 2"></div>
    <div><img src="image3.jpg" alt="이미지 3"></div>
  </div>

  <button id="playButton">재생</button>
  <button id="stopButton">중지</button>

  <script>
    $(document).ready(function(){
      var $slider = $('.slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 5000,
      });

      $('#stopButton').on('click', function() {
        $slider.slick('slickPause');
      });

      $('#playButton').on('click', function() {
        $slider.slick('slickPlay');
      });
    });
  </script>
</body>
</html>

2단계: Slick 슬라이더 초기화

위의 코드에서 Slick 슬라이더를 $(document).ready() 함수 내에서 초기화합니다.

3단계: 버튼을 위한 이벤트 리스너 추가

재생 및 중지 버튼에 click 이벤트 리스너를 추가합니다. 재생 버튼을 클릭하면 슬라이더가 다시 자동 재생을 시작하고, 중지 버튼을 클릭하면 슬라이더의 자동 재생이 멈춥니다.

설명

  • HTML: .slider 클래스를 가진 슬라이더와 playButtonstopButton ID를 가진 두 개의 버튼을 생성합니다.
  • CSS: 필요한 경우 사용자 정의 스타일을 추가할 수 있습니다.
  • JavaScript/jQuery: 자동 재생이 활성화된 상태로 Slick 슬라이더를 초기화합니다. 그런 다음 재생 및 중지 버튼에 click 이벤트 리스너를 추가하여 Slick의 slickPauseslickPlay 메서드를 사용하여 슬라이더의 자동 재생 기능을 제어합니다.

요약

이 설정을 통해 커스텀 재생 및 중지 버튼을 사용하여 Slick 슬라이더의 자동 재생 기능을 제어할 수 있습니다. 프로젝트에 Slick CSS 및 JS 파일을 올바르게 포함시키는 것을 잊지 마세요. 스타일 및 기능은 필요에 따라 추가로 커스터마이즈할 수 있습니다.

반응형
❤️ 외주/과외 문의
🖥️ 클라우드 메뉴판 : 디지털팝