[javascript] Slick Carousel으로 텍스트와 함께 슬라이더를 만들 수 있나요?

24 Nov 2023

javascript

Slick Carousel을 사용하여 텍스트와 함께 슬라이더를 만들려면 다음과 같은 단계를 따를 수 있습니다:

Slick Carousel 라이브러리를 프로젝트에 포함시킨다. 이를 위해 HTML의 <head> 태그 내에 다음 코드를 추가합니다:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

HTML 마크업에서 슬라이더 컨테이너를 생성합니다. 이를 위해 다음과 같은 구조를 사용합니다:

<div class="slider">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>

CSS를 이용하여 슬라이더 크기와 스타일을 설정합니다. 예를 들어, 다음과 같은 CSS를 사용할 수 있습니다:

.slider {
  width: 500px;
  height: 300px;
}

.slide {
  text-align: center;
  font-size: 24px;
  line-height: 300px;
}

JavaScript 코드를 사용하여 Slick Carousel을 초기화하고 옵션을 설정합니다. 다음과 같은 코드를 사용할 수 있습니다:

$(document).ready(function(){
  $('.slider').slick({
    dots: true, // 페이지 번호 표시
    infinite: true, // 무한 롤링
    speed: 500, // 애니메이션 속도
    slidesToShow: 1, // 표시할 슬라이드 수
    slidesToScroll: 1 // 슬라이드할 때 이동할 슬라이드 수
  });
});

브라우저에서 결과를 확인합니다. 슬라이더가 표시되고 텍스트와 함께 슬라이드되는 것을 확인할 수 있습니다.

이제 Slick Carousel을 사용하여 텍스트와 함께 슬라이더를 만들 수 있습니다. 자세한 내용은 Slick Carousel 공식 문서를 참조하시기 바랍니다.