기본형 슬라이드를 만들기 위해 슬릭 슬라이드 라이브러리를 링크시켜 줍니다.
<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,
});
});
'LIBRARY > SLICK-SLIDE' 카테고리의 다른 글
| Slick-slide : 슬라이드 일시정지 아이콘 만들기 (0) | 2021.01.29 |
|---|---|
| Slick-slide : 도트 수정하기 (0) | 2021.01.28 |
| Slick-slide : 슬라이드 화살표 변경하기 (0) | 2021.01.28 |
| Slick-slide : 주요 기본 Setting 값 (0) | 2021.01.28 |
| library - slick slide 시작하기 (0) | 2021.01.28 |
댓글