[Slide Slick] 01. 자동 슬라이더 기본 형태

1. CDN 

<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

 

2. 기본구조 

<div class="continaer">
  <div class="visual">
    <div><img src="img/visual_bg.jpg" alt=""></div>
    <div><img src="img/visual_bg2.jpg" alt=""></div>
    <div><img src="img/visual_bg3.jpg" alt=""></div>
  </div>
</div>

 

3. 스크립트

$('.visual').slick({
	autoplay : true, // 기본값  false 
	autoplaySpeed : 1000, // 기본값 3000
});

 

4. CSS 

@charset "utf-8";

.continaer { /* 비주얼 영역을 가운데 정렬하기 위한 컨테이너 */ 
    max-width: 1920px; margin: 0 auto; outline: 1px solid red;
}
.slick-arrow {  /* 컨트롤 버튼 공통 */
    position: absolute;
    top: 50%;
    left: 4%;
    z-index: 10; 
    width: 72px;
    height: 72px;
    text-indent: -9999px;
    border: none;
}
.slick-next { /* 다음 컨트롤러 */
    right: 4%; 
    left: unset;
    background: url(/img/visual_rbtn.png) no-repeat rgba(0 ,0, 0, 0.4);
}
.slick-prev { /* 이전 컨트롤러 */
    background: url(/img/visual_lbtn.png) no-repeat rgba(0 ,0, 0, 0.4);
}