728x90
반응형
<!DOCTYPE HTML>
<html>
<head>
<!--이 slick플러그인은 jquery를 이용하여 작성되었기에 제이쿼리도 필요-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
</head>
<body>
<div id="slick-slide">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</div>
<script>
$(document).ready(function(){
$("#slick-slide").slick({
accessibility : !0, //접근성
adaptiveHeight : !0, //슬라이더 높이를 현재 슬라이드에 맞춤
//appendArrows : 화살표가 위치한 요소 변경
//appendDots : 점이 위치한 요소 변경
arrows : !1, //화살표 사용
//asNavFor : 슬라이드 동기화
autoplay : !0, //슬라이드 자동 재생 가능
autoplaySpeed : 3000, //다음 슬라이드까지 시간 간격
//centerMode : 가운데 정렬 활성화
centerPadding : '50px', //가운데 정렬에서 측면 패딩
cssEase : 'ease', //css ease
slide : "div",
infinite : true, //무한 슬라이드
speed : 300, //슬라이드가 넘어가는데 걸리는 시간
slidesToShow : 1,
slidesToScroll : 1
});
});
</script>
</body>
</html>
자세한 사용법과 플러그인 다운로드는 아래 링크를 참고하십시오.
728x90
728x90
'JAVASCRIPT' 카테고리의 다른 글
| 함수 내보내기 export (+ 가져오기 import) (0) | 2022.08.27 |
|---|---|
| [ 자바스크립트 ] prototype (0) | 2019.11.12 |
| [ 자바스크립트 ] 배열 종류 (0) | 2019.10.27 |
댓글