[javascript] Slick Carousel을 사용하여 슬라이더의 자동 재생 시간을 조절해 보세요.

24 Nov 2023

javascript

Slick Carousel은 웹사이트에서 이미지 슬라이더 또는 컨텐츠 슬라이더를 구현할 때 자주 사용되는 도구입니다. 이번에는 Slick Carousel을 사용하여 슬라이더의 자동 재생 시간을 조절하는 방법에 대해 알아보겠습니다.

Slick Carousel 설치하기

먼저, Slick Carousel을 사용하기 위해 웹사이트에 해당 라이브러리를 설치해야 합니다. 아래의 스크립트 태그를 <head> 태그 안에 추가해주세요.

<head>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
</head>

다음으로 스크립트를 로드하기 위해 <body> 태그 바로 위에 아래의 스크립트 태그를 추가해주세요.

<body>
  <!-- 네비게이션 등 슬라이더 내용 작성 -->
  
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</body>

이제 Slick Carousel이 로드되었습니다. 이어서 자동 재생 시간을 조절하는 방법에 대해 알아보겠습니다.

자동 재생 시간 조절하기

Slick Carousel을 초기화할 때 autoplaySpeed 옵션을 사용하여 슬라이더의 자동 재생 시간을 조절할 수 있습니다. 자동 재생 시간은 밀리초 단위로 설정하며, 기본값은 3000입니다.

예를 들어, 자동 재생 시간을 5초로 조절하려면 아래와 같이 스크립트를 작성해주세요.

$(document).ready(function(){
  $('.slider').slick({
    autoplay: true,
    autoplaySpeed: 5000
  });
});

위의 코드에서 .slider는 슬라이더 요소의 클래스명을 나타냅니다. 자신의 웹사이트에 맞게 클래스명을 변경하세요.

추가적인 옵션

Slick Carousel에는 다양한 옵션들이 있습니다. 자세한 내용은 공식 문서를 참조하시기 바랍니다.

이제 여러분은 Slick Carousel을 사용하여 슬라이더의 자동 재생 시간을 조절할 수 있습니다. 자신의 웹사이트에 적용해보세요!