[Html & CSS] 슬라이드쇼 구현하는 방법 !! (Slick 라이브러리를 활용)

Coding/HTML & CSS

[Html & CSS] 슬라이드쇼 구현하는 방법 !! (Slick 라이브러리를 활용)

포스트it 2023. 7. 8. 09:00

728x90

[Html & CSS] 슬라이드쇼 구현하는 방법 !! (Slick 라이브러리를 활용)

지난 글에서 추천한 슬라이드 관련 라이브러리 중 Slick을 사용하여 슬라이드를 구현해보았습니다.

공식 홈페이지는 아래글 참조해주세요 :)

2023.07.02 - [여러가지/기타] - [JavaScript & jQuery] 슬라이드(Slide) 관련 라이브러리 추천 !!

[JavaScript & jQuery] 슬라이드(Slide) 관련 라이브러리 추천 !!

[JavaScript & jQuery] 슬라이드(Slide) 관련 라이브러리 추천 !! Swiper 순수 자바스크립트에서 작동이되고, 사용자가 많아 예시도 많아서 좋다. https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is

seill.tistory.com

예제코드

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slick Slide Show Example</title>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
    <style>
        body {
            background: peachpuff;
        }

        .slider {
            width: 600px;
            margin: 0 auto;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            border-radius: 10px;
        }

        .slick-dots {
            bottom: 10px;
        }

        .slick-dots li button:before {
            font-size: 10px;
            line-height: 10px;
            color: #fff;
        }
    </style>
</head>

<body>

    <div class="slider">
        <img src="https://picsum.photos/id/18/367/267" alt="Image 1">
        <img src="https://picsum.photos/id/19/367/267" alt="Image 2">
        <img src="https://picsum.photos/id/20/367/267" alt="Image 3">
        <img src="https://picsum.photos/id/21/367/267" alt="Image 4">
    </div>

</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
    $('.slider').slick({
        autoplay: true,
        autoplaySpeed: 2000,
        dots: true,
        infinite: true,
        speed: 500,
        fade: true,
        cssEase: 'linear',
        adaptiveHeight: true
    });
</script>

결과값

728x90