[javascript] Slick Carousel으로 버튼으로 슬라이더를 제어하는 방법을 알려주세요.

24 Nov 2023

javascript

Slick Carousel은 강력한 자바스크립트 라이브러리로, 반응형 슬라이더를 쉽게 구현할 수 있게 해줍니다. 이제 버튼을 사용하여 슬라이더를 제어하는 방법을 알아보겠습니다.

먼저, Slick Carousel 라이브러리를 HTML 문서에 추가해야 합니다. 아래의 예제 코드를 참고하십시오:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
  <title>Slick Carousel</title>
</head>
<body>
  <div class="slider">
    <!-- 슬라이더 아이템들 -->
  </div>
  
  <div class="controls">
    <button class="prev">이전</button>
    <button class="next">다음</button>
  </div>
  
  <script>
    $(document).ready(function(){
      $('.slider').slick(); // Slick Carousel 초기화
      
      // 이전 버튼 클릭 시 슬라이더 이동
      $('.prev').click(function(){
        $('.slider').slick('slickPrev');
      });
      
      // 다음 버튼 클릭 시 슬라이더 이동
      $('.next').click(function(){
        $('.slider').slick('slickNext');
      });
    });
  </script>
</body>
</html>

위 코드에서는 slick.css와 slick.min.js를 가져와야 합니다. 또한 jQuery도 같이 가져와야 합니다.

슬라이더 아이템들은 <div class="slider">로 감싸져 있어야 합니다. 제어할 버튼은 <div class="controls"> 안에 위치하며, 이전 버튼은 <button class="prev">로, 다음 버튼은 <button class="next">로 작성되었습니다.

JavaScript 코드에서는 $('.slider').slick();으로 Slick Carousel을 초기화하고, $('.prev').click()과 $('.next').click() 함수 안에서 slickPrev와 slickNext 메서드를 통해 이전과 다음 슬라이드로 이동할 수 있습니다.

이제 버튼을 클릭하여 슬라이더를 제어할 수 있게 되었습니다. Slick Carousel을 사용하여 웹 페이지에 멋진 슬라이더를 만들어 보세요!

참고 자료: