[javascript] Slick Carousel을 사용하여 썸네일 이미지를 추가할 수 있을까요?

24 Nov 2023

javascript

아래는 Slick Carousel을 사용하여 썸네일 이미지를 추가하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <style>
        .slider {
            width: 50%;
            margin: auto;
        }
        .slider img {
            width: 100%;
        }
    </style>
</head>
<body>
    <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>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.slider').slick({
                dots: true,
                appendDots: $('.slider'),
                slidesToShow: 1,
                slidesToScroll: 1
            });
        });
    </script>
</body>
</html>

위 예제에서는 Slick Carousel의 CSS와 JavaScript 파일을 불러오고 슬라이드 컨테이너를 만듭니다. 각 이미지는 간단하게 <img> 태그로 추가됩니다. 그리고 jQuery를 사용하여 Slick Carousel을 초기화합니다. slidesToShow 및 slidesToScroll 옵션을 조정하여 한 번에 보여질 이미지 수를 설정할 수 있습니다.

위의 코드를 사용하여 웹 페이지에 Slick Carousel을 추가하고 썸네일 이미지를 표시할 수 있습니다.