Slick slider
실습
html
<!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>[플러그인 사용방법] 콘텐츠 슬라이더 Slick Slider 사용법 및 커스턴 CSS 변경</title>
<link rel="stylesheet" href="./assets/css/style.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Slick.js -->
<link rel="stylesheet" href="slick/slick-theme.css">
<link rel="stylesheet" href="slick/slick.css">
<script src="slick/slick.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> -->
</head>
<body>
<div class="myslider">
<div>Slide content #01</div>
<div>Slide content #02</div>
<div>Slide content #03</div>
<div>Slide content #04</div>
<div>Slide content #05</div>
<div>Slide content #06</div>
<div>Slide content #07</div>
<div>Slide content #08</div>
<div>Slide content #09</div>
</div>
<script src="./assets/js/script.js"></script>
</body>
</html>CSS
.myslider {
width: 800px;
margin: auto;
}
.myslider div {
border: 1px solid black;
height: 300px;
background-color: #ddd;
font-size: 30px;
}js
$('.myslider').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1000,
speed: 500,
fade: true,
cssEase: 'linear',
dots: true,
});
