노쉬발 킵고잉/Css

slick slider

테스p 2022. 1. 27. 11:30

 

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

 

오른쪽 메뉴제일 끝 get it now 클릭

다운로드하거나 CDN사용하면 됨

CSS

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

//앞에다가 http:// 이거 넣어줘야함

JS

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

둘다 앞에다가 http:// 넣어줘야함

그리고 제이쿼리는 xdn위에다가 넣어줘야함

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
        <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

        <script  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script  type="text/javascript" src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
        <script defer src="js/main.js"></script>
    
        <link rel="stylesheet" href="css/style.css">


    </head>
    <body>
        <section class="js-listSlide">
        <div class="">
            <img src="/image/bottle-img.jpg" alt="">
        </div>      
        <div class="">
            <img src="/image/bottle-img.jpg" alt="">
        </div>     
        <div class="">
            <img src="/image/bottle-img.jpg" alt="">
        </div>           
        </section>

        <script type="text/javascript">
            $('.js-listSlide').slick();
        </script>
    </body>
</html>

부모의 클래스를 스크립트에 지정해야만 안에있는 자식들이 월킹한다는겨~!

 

저작자표시