jQeury

Slick Slider[다운로드 파일 / 옵션 조정 방법]

- 공식 웹사이트

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

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!

kenwheeler.github.io

- 활용용도 : 자동 슬라이더 / 컨텐츠 슬라이더 등 활용도 매우 높음

- 장점 : 스크립트 옵션 조절 간편 / 모바일 대응 / 드래그 슬라이딩

유사 플러그인

- BX Slider

- Swiper Slider

[옵션 대표적인 것들]

- slidesToshow: 몇개씩 보여줄건지

- slideToscroll: 드래그 해서 넘길때 몇개씩 넘어가게 할건지

- responsive: 반응형 때 필요

- autoplay: 자동재생

- fade: 크로스페이드 기능

- dots: 도트네비게이션이 싫다면 false

slick.zip

0.01MB

CDN

css

적용 방법

1. 파일을 다운로드 받거나 CDN 연결한다 (CDN의 장점은 자동으로 업데이트가 된다는 점)

2. 다운로드 받거나 CDN 주소를 링크하고 html 구조를 만든다.

3. 옵션 조정

4. custom css를 만든다(dot모양이나 prev버튼 모양 바꾸는 것 등등)

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[플러그인 사용방법] 콘텐츠 슬라이더 사용법 및 CSS 변경 </title>
    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <!-- Slick.js -->
    <link rel="stylesheet" href="slick/slick.css">
    <link rel="stylesheet" href="slick/slick-theme.css">
    <script src="slick/slick.min.js"></script>
    <style>
        body {
            background-color: pink;
            margin: 0;
        }

        .myslider {
            width: 800px;
            margin: auto;
        }

        .myslider div {
            border: 1px solid #000;
            height: 300px;
            background: #eee;
            font-size: 30px;
            text-align: center;
        }
        
        .myslider .slick-arrow {
            display: none !important;
            /* 모바일에서 가로 스크롤이 생기는 이유는 prev 버튼 때문 > 개발자도구에서 찾아서 display:none  */
        }

        .myslider .slick-dots {
            bottom: 0 !important;
            /* .slick-dots는 좌표로 되어있기 때문에 개발자도구에서 찾아서 위치 값 바꿔준다 */
        }

        @media (max-width: 768px) {
            .myslider{
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div class="myslider">
        <div>Slide Content #01</div>
        <div>Slide Content #02</div>
        <div>Slide Content #03</div>
        <div>Slide Content #04</div>
        <div>Slide Content #05</div>
        <div>Slide Content #06</div>
        <div>Slide Content #07</div>
        <div>Slide Content #08</div>
        <div>Slide Content #09</div>
    </div>

    <script>
        $('.myslider').slick({
            infinite: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 3000,
            speed: 500,
            fade: false,
            cssEase: 'linear',
            dots: true,
            responsive: [{
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 3,
                        infinite: true,
                        dots: true
                    }
                },
                {
                    breakpoint: 600,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 2
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }
                // You can unslick at a given breakpoint now by adding:
                // settings: "unslick"
                // instead of a settings object
            ]
        });
    </script>
</body>

</html>

'jQeury' 카테고리의 다른 글

Swiper Slider[수직 슬라이더 기능] (0)	2022.08.30
BX Slider (0)	2022.08.29
제이쿼리와 자바스크립트의 차이 / 바닐라 자바스크립트란? (0)	2022.08.29
Method Basic (0)	2022.05.13
함수 - click / mouseenter-mouseleave (0)	2022.05.12

Contents

새소식

인기 검색어

Slick Slider[다운로드 파일 / 옵션 조정 방법]

'jQeury' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바