[javascript] Slick Carousel을 이용하여 이미지 갤러리를 만들 수 있나요?

24 Nov 2023

javascript

Slick Carousel은 간편하고 유연한 이미지 슬라이더 라이브러리로, 이미지 갤러리를 만드는 것에 매우 유용합니다. 다양한 설정 및 사용자 정의 옵션을 제공하여 웹사이트에 맞는 슬라이더를 만들 수 있습니다.

아래는 Slick Carousel을 이용하여 이미지 갤러리를 만드는 예제입니다.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick-theme.css"/>
</head>
<body>
    <div class="gallery">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
        <img src="image4.jpg" alt="Image 4">
    </div>

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

위의 예제에서는 slick.css와 slick-theme.css를 로드하고, 이미지들을 감싸는 div 요소에 gallery 클래스를 추가했습니다. 그리고 jQuery 및 slick 라이브러리를 로드하고 $(document).ready() 함수 내에서 slick() 메소드를 사용하여 슬라이더를 초기화합니다. 이 예제에서는 3개의 이미지를 한 번에 보여주고, 1개의 이미지씩 슬라이드 이동하도록 설정했습니다.

Slick Carousel을 통해 다양한 슬라이더 스타일과 동작을 제어할 수 있으며, 자세한 정보는 Slick Carousel 공식 문서를 참조하시기 바랍니다.