[javascript] Slick Carousel으로 다중 슬라이더를 만들어 보세요.

24 Nov 2023

javascript

슬라이더는 웹 페이지에서 이미지나 컨텐츠를 시각적으로 전환하고 표시하는데 유용한 도구입니다. 이번에는 자바스크립트 라이브러리인 Slick Carousel을 사용하여 다중 슬라이더를 만들어 보겠습니다.

Slick Carousel이란?

Slick Carousel은 반응형이고 터치 기능을 지원하는 다목적 슬라이딩 도구입니다. 이미지, 동영상, HTML 컨텐츠 등을 전환하여 보여줄 수 있습니다.

시작하기

1. Slick Carousel 라이브러리 가져오기

먼저 Slick Carousel 라이브러리를 다운로드하거나 CDN을 통해 가져옵니다. 다음과 같이 <head> 태그 내에 스타일시트와 스크립트 파일을 추가합니다.

<head>
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>
<body>
  <!-- 슬라이더 컨테이너 -->
  <div class="slider-container">
    <!-- 슬라이드 아이템 -->
    <div>
      <img src="slide1.jpg" alt="Slide 1">
    </div>
    <div>
      <img src="slide2.jpg" alt="Slide 2">
    </div>
    <div>
      <img src="slide3.jpg" alt="Slide 3">
    </div>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="slick/slick.min.js"></script>
</body>

2. 슬라이더 초기화하기

<script> 태그 내에서 슬라이더를 초기화합니다. 다음 예제는 .slider-container 클래스를 가진 요소를 슬라이더로 설정합니다.

<script>
  $(document).ready(function(){
    $('.slider-container').slick();
  });
</script>

3. 슬라이더 옵션 설정하기

다중 슬라이더를 만들기 위해 Slick Carousel의 옵션을 설정할 수 있습니다. 예를 들어, 한 번에 여러 개의 슬라이드를 보이도록 하고, 자동으로 슬라이드를 전환하도록 설정하려면 다음과 같이 옵션을 추가해 주세요.

<script>
  $(document).ready(function(){
    $('.slider-container').slick({
      slidesToShow: 3, // 한 번에 보여줄 슬라이드 개수
      autoplay: true, // 자동으로 슬라이드 전환 여부
      autoplaySpeed: 3000, // 자동 전환 속도 (3초)
    });
  });
</script>

4. 슬라이더 스타일링하기

마지막으로, 슬라이더에 대한 스타일링을 할 수 있습니다. 예를 들어, 가로 슬라이드의 크기와 배경색을 변경하려면 다음과 같이 스타일을 지정해 주세요.

<style>
  .slider-container {
    width: 80%; /* 슬라이더 컨테이너의 가로 크기 */
    background-color: #f2f2f2; /* 배경색 */
  }
</style>

마치며

이제 Slick Carousel을 사용하여 다중 슬라이더를 만들었습니다. 다양한 옵션을 사용하여 원하는 스타일과 동작을 지정할 수 있습니다. 더 많은 옵션과 사용 방법은 Slick Carousel 공식 문서를 참고하세요.

Happy coding!