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

library - slick slide : single item 수정하기(기본형)

by purple-whale 2021. 1. 28.

기본형 슬라이드를 만들기 위해 슬릭 슬라이드 라이브러리를 링크시켜 줍니다.

<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"/>
  <link rel="stylesheet" href="./dist/css/reset.css">
  <link rel = "stylesheet" href = "https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css" >
  <link rel="stylesheet" href="./dist/css/comm.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>

기본형 코드를 comm.js에 입력합니다.

$(function () {
  $('.slick-top').slick();
});

변형 1. 자동으로 넘겨주기 + 2초마다 실행 + 슬라이드 도트 만들기 추가

$(function () {
  $('.slick-top').slick({
    autoplay: true,
    autoplaySpeed: 2000,
    dots: true,
  });
});

변형 2. 자동으로 넘겨주기 + 5초마다 실행 + 슬라이드 토트 만들기 추가 + 슬라이드 화살표 제거

$(function () {
  $('.slick-top').slick({
    autoplay: true,
    autoplaySpeed: 5000,
    dots: true,
    arrows: false,
  });
});

 

댓글