[javascript] Slick Carousel을 사용하여 슬라이더에 텍스트 레이어를 추가할 수 있나요?

24 Nov 2023

javascript

네, Slick Carousel을 사용하면 슬라이더에 텍스트 레이어를 추가할 수 있습니다. Slick Carousel은 사용하기 쉽고 많은 유형의 컨텐츠, 텍스트 포함,을 슬라이딩할 수 있게 해주는 JavaScript 라이브러리입니다.

다음은 Slick Carousel을 사용하여 슬라이더에 텍스트 레이어를 추가하는 예제입니다.

<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
  <style>
    .slide {
      position: relative;
      text-align: center;
    }

    .slide h2 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div class="slider">
    <div class="slide">
      <img src="slide1.jpg" alt="Slide 1">
      <h2>텍스트 레이어 1</h2>
    </div>
    <div class="slide">
      <img src="slide2.jpg" alt="Slide 2">
      <h2>텍스트 레이어 2</h2>
    </div>
    <div class="slide">
      <img src="slide3.jpg" alt="Slide 3">
      <h2>텍스트 레이어 3</h2>
    </div>
  </div>

  <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>
  <script>
    $(document).ready(function(){
      $('.slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000
      });
    });
  </script>
</body>
</html>

위의 예제는 간단한 슬라이더를 만들고 각 슬라이드에 텍스트 레이어를 추가하는 방법을 보여줍니다. 각 슬라이드는 “slide” 클래스로 정의되고, 텍스트 레이어는 “h2” 요소입니다. CSS를 사용하여 텍스트 레이어를 슬라이드 내부 중앙에 위치시킬 수 있습니다.

또한, 위의 예제는 jQuery와 Slick Carousel 라이브러리를 가져와 사용합니다. jQuery와 Slick Carousel의 CDN 링크를 포함해야 합니다.

여기서 “slide1.jpg”, “slide2.jpg”, “slide3.jpg”는 실제 슬라이드에 사용할 이미지 파일의 경로입니다. 필요한 이미지 파일을 준비하시고 경로를 적절하게 수정해주세요.

위의 코드를 HTML 파일에 저장하고 웹 브라우저에서 열면 슬라이더에 텍스트 레이어가 추가된 것을 확인할 수 있습니다.

더 자세한 내용은 Slick Carousel 공식 문서를 참조해주세요.