본문 바로가기
  • purple-whale
LIBRARY/SLICK-SLIDE

library - slick slide 시작하기

by purple-whale purple-whale 2021. 1. 28.

 

 

1. CDN 으로 연결

   title 밑에 아래 주소를 붙여넣어줍니다.

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

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

 

 

2. 다운 받아서 링크

   아래 사이트에서 파일을 다운받아 줍니다.

 

 

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


꼭 필요한 파일만 복사하여 내폴더 안에 붙여넣기 한 후 html파일에서 링크합니다.

*jquery 파일이 있어야만 슬라이드가 실행됩니다. 함께 링크 시켜주세요!!*

내 js 파일도 빠지지 않고 함께 링크시켜주세요.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>slick-slide</title>
  <link rel="stylesheet" type="text/css" href="./dist/vender/slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="./dist/vender/slick/slick-theme.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script type="text/javascript" src="./dist/vender/slick/slick.js"></script>
  <script src="./dist/js/comm.js"></script>
</head>

 

준비된 이미지 파일을 넣어주고

<body>
  <div class="slick-top">
    <div><img src="./images/slide1.png" alt="슬라이드이미지"></div>
    <div><img src="./images/slide2.png" alt="슬라이드이미지"></div>
    <div><img src="./images/slide3.png" alt="슬라이드이미지"></div>
  </div>
</body>
$(function () {

    // slick 실행 스크립트
    $('.slick-top').slick();

});

댓글0