-
slick slider노쉬발 킵고잉/Css 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>부모의 클래스를 스크립트에 지정해야만 안에있는 자식들이 월킹한다는겨~!
'노쉬발 킵고잉 > Css' 카테고리의 다른 글
Checkbox custom (0) 2022.09.20 sass 터미널로 설치 (0) 2022.08.08 [css]white-space: nowrap; 이게 뭐였더라? (0) 2022.01.21 Bootstrap (0) 2022.01.15 [css]nth 아즨차로 이해 해보자 (0) 2022.01.14