[javascript] Slick Carousel으로 원하는 슬라이더 네비게이션을 만드는 방법을 알려주세요.

24 Nov 2023

javascript

Slick Carousel은 웹 사이트에서 다양한 슬라이더를 만들 수 있는 유명한 jQuery 플러그인입니다. 이 플러그인을 사용하면 간단하게 원하는 슬라이더 네비게이션을 만들 수 있습니다.

1. Slick Carousel 설치하기

Slick Carousel을 사용하기 위해서는 먼저 해당 라이브러리를 웹 페이지에 추가해야 합니다. 아래와 같은 방법으로 Slick Carousel을 설치합니다.

<head>
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>
<body>
  ...
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="slick/slick.min.js"></script>
</body>

2. 슬라이더 구성하기

슬라이더를 만들기 위해 다음과 같이 HTML 마크업을 만들어야 합니다.

<div class="slider">
  <div><img src="image1.jpg" alt="Image 1"></div>
  <div><img src="image2.jpg" alt="Image 2"></div>
  <div><img src="image3.jpg" alt="Image 3"></div>
</div>

위의 마크업에서는 .slider 클래스를 가진 상위 div 요소 안에 이미지 아이템을 포함한 div 요소들을 만들었습니다.

3. 슬라이더 초기화하기

JavaScript를 사용하여 Slick Carousel을 초기화합니다. 아래 코드는 슬라이더를 초기화하는 예제입니다.

$('.slider').slick({
  dots: true,
  autoplay: true,
  autoplaySpeed: 2000,
  slidesToShow: 1,
  slidesToScroll: 1
});

위의 코드에서는 $('.slider')로 슬라이더의 클래스 이름을 지정하고, slick() 함수를 호출하여 슬라이더를 초기화합니다. dots 옵션은 슬라이더 아래에 동그라미로 표시되는 네비게이션을 생성합니다. autoplay와 autoplaySpeed는 슬라이더의 자동 재생 기능을 설정합니다. slidesToShow와 slidesToScroll은 슬라이더에서 보여지는 슬라이드의 개수와 한 번에 넘어가는 슬라이드의 개수를 설정합니다.

4. 추가 스타일링하기

Slick Carousel은 슬라이더를 제어하는 CSS 클래스를 제공합니다. 이를 사용하여 슬라이더의 스타일을 변경할 수 있습니다. 예를 들어, 네비게이션 아이템의 스타일을 변경하고 싶다면 다음과 같이 CSS를 작성할 수 있습니다:

.slick-dots li button {
  width: 10px;
  height: 10px;
  background-color: #000;
  border-radius: 50%;
  border: none;
  outline: none;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.slick-dots .slick-active button {
  opacity: 1;
}

위의 CSS는 네비게이션 아이템의 크기, 배경색, 투명도 등을 변경합니다.

결론

Slick Carousel을 사용하여 슬라이더 네비게이션을 만드는 방법을 알아보았습니다. 다양한 옵션을 사용하여 슬라이더를 원하는 대로 사용자 정의할 수 있습니다. Slick Carousel 공식 문서를 참조하면 더 자세한 설정 방법과 사용 예제를 확인할 수 있습니다.

참고 자료:

Slick Carousel 공식 문서