slick

jQuery 기반 이미지 슬라이드 라이브러리

slick - the last carousel you'll ever need

slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

https://kenwheeler.github.io/slick/

 slick 플러그인 가져오기

CDN 으로 가져오기

<!-- slick css CDN -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

<!-- slick js CDN -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
HTML
복사

 FILE 로 가져오기

github.com

https://github.com/kenwheeler/slick/archive/v1.8.1.zip

<!-- slick css FILE -->
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/slick-theme.css">

<!-- slick js FILE -->
<script src="js/slick.min.js"></script>
HTML
복사

 jQuery 가져오기

<!-- jQuery CDN 방식으로 포함하기 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
HTML
복사

jQuery 포함하는 코드가 플러그인 포함코드보다 위에 있어야한다.

내가 만든 css / script 가져오기

<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
HTML
복사

앞에 내용을 한 번 포함하기

<!-- slick 플러그인 -->
<!-- slick css CDN -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- slick css FILE -->
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/slick-theme.css">
<!-- css -->
<link rel="stylesheet" href="css/style.css">


<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- slick js CDN -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!-- slick js FILE -->
<script src="js/slick.min.js"></script>
<!-- js -->
<script src="js/script.js"></script>
HTML
복사

이미지 슬라이드 HTML 코드 작성

<div class="slide-container">
    <div class="slide"><img src="img/slide01.jpg" alt=""></div>
    <div class="slide"><img src="img/slide02.jpg" alt=""></div>
    <div class="slide"><img src="img/slide03.jpg" alt=""></div>
    <div class="slide"><img src="img/slide04.jpg" alt=""></div>
    <div class="slide"><img src="img/slide05.jpg" alt=""></div>
    <div class="slide"><img src="img/slide06.jpg" alt=""></div>
    <div class="slide"><img src="img/slide07.jpg" alt=""></div>
    <div class="slide"><img src="img/slide08.jpg" alt=""></div>
    <div class="slide"><img src="img/slide09.jpg" alt=""></div>
</div>
HTML
복사

기본 스타일 지정하기

.slide-container {
    width: 1200px;
    height: 480px;
    margin: 150px auto;
}


.slide {
    width: auto;
    height: 480px;
    padding: 20px;
    box-sizing: border-box;
}


.slide img { 
    width: 100%;
    height: 100%;
}
CSS
복사

슬라이드 영역 반응형 적용하기

/* 반응형 */
@media screen and (max-width: 1024px) {
    .slide-container { width: 800px; }
}


@media screen and (max-width: 800px) {
    .slide-container { width: 500px; height: 300px; }
    .slide { height: 300px; }
}


@media screen and (max-width: 480px) {
    .slide-container { width: 300px; }
}
CSS
복사

 slick 슬라이드 시작하기!

script.js

// 문서 준비 이벤트
$(function() {

    // 슬릭 슬라이드 시작!
    $('.slide-container').slick()

})
JavaScript
복사

다양한 옵션 적용하기

script.js

$(function() {

    // 슬릭 슬라이드 시작!
    $('.slide-container').slick({
        dots: true,
        arrows: true,

        autoplay: true,                 // 자동재생 여부
        autoplaySpeed: 3000,            // 자동재생 슬라이드 시간
        infinite: true,                 // 무한 반복 
        speed:500,                      // 슬라이드가 전환되는 시간

        // centerMode: true,            // 센터 모드
        // centerPadding: '60px',       // 센터 모드 시, 내부여백
        slidesToShow: 1,                // 보여질 슬라이드 개수
        slidesToScroll: 1,              // 스크롤될 슬라이드 개수

        pauseOnDotsHover: true,         // 페이지네이션 호버 시 자동재생 멈춤
        pauseOnFocus: true,             // 포커스 시, 자동재생 멈춤
        pauseOnHover: true,             // 호버 시, 자동재생 멈춤

        /* 효과 */
        // fade: true,
        // cssEase: 'linear',

        // 네비게이션 화살표 커스텀
        // prevArrow: '<button class="slide-arrow prev-arrow"></button>',
        // nextArrow: '<button class="slide-arrow next-arrow"></btton>',

        /* 반응형 */
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 1,
                }
            },
            {
                breakpoint: 800,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2,
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                }
            },
    
        ]

    })

})
JavaScript
복사

10.

커스텀

화살표 커스텀

/* slick - 네비게이션 화살표 */
.prev-arrow {
    position: absolute;
    left: 2%;
    top: 50%;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
    z-index: 100;
    background: url(../img/prev.png) no-repeat center center / 40px 40px;
    outline: none;
    border: none;
    filter: brightness(40%);
    cursor: pointer;
}


.next-arrow {
    position: absolute;
    right: 2%;
    top: 50%;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
    z-index: 100;
    background: url(../img/next.png) no-repeat center center / 40px 40px;
    outline: none;
    border: none;
    filter: brightness(40%);
    cursor: pointer;
}


.prev-arrow:hover,
.next-arrow:hover {
    filter: brightness(100%);
}
CSS
복사

닷츠 커스텀

/* 네비게이션 닷츠 커스텀 */
.slick-dots {
    position: absolute;
    bottom: -20px;
}


.slick-dots li { margin-right: 20px; }
.slick-dots li button {}
/* 닷츠 */
.slick-dots li button::before {
    font-size: 0;
    width: 10px;
    height: 10px;
    background-color: sandybrown;
}
/* 현재 닷츠 */
.slick-dots li.slick-active button::before { background-color: orange; }



.nav-btn {
    display: block;
    padding: 5px;
    margin-right: 10px;
    width: 30px;
    height: 30px;
    line-height: 20px;
    background-color: rgb(240, 196, 158);
    border-radius: 50%;
    color: white;
    box-sizing: border-box;
}


.slick-dots li.slick-active .nav-btn {
    background-color: orange;
}
CSS
복사