[Slick Slider] 03. 점으로 표현된 인디케이터 만들기

1. html 

<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>

 

2. JS

$('.visual').slick({
    autoplay : true, 
    autoplaySpeed : 1000,
    arrows : false, 
    dots : true, 
});

dots 속성 

 

3. css

@charset "utf-8";
li { list-style: none; margin: 0; padding: 0;}
.continaer { /* 비주얼 영역을 가운데 정렬하기 위한 컨테이너 */ 
    max-width: 1920px; margin: 0 auto; outline: 1px solid red;
}
.slick-dots { position: absolute; bottom: 5%; left: 50%; margin: 0; padding: 0; transform: translateX(-50%);} /*마진패딩 초기화 */
.slick-dots li { float: left; margin-right: 22px;} /* 가로배치, 점들 사이의 간격 */
.slick-dots li button { background: #fff; width: 20px; height: 20px;  border-radius: 50%; border: none;  text-indent: -9999px;} /* 원 모양 */
.slick-dots li:hover button { background: red;} /*마우스를 올렸을 때 */
.slick-dots li.slick-active button { background: red; } /*현재슬라이드 위치 표시*/

 

 

스크립트가 생성한 html  

<ul class="slick-dots" role="tablist">
  <li role="presentation" class="slick-active">
  	<button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-label="1 of 3" tabindex="0" aria-selected="true">1</button>
  </li>
  <li role="presentation" >
  	<button type="button" role="tab" id="slick-slide-control01" aria-controls="slick-slide01" aria-label="2 of 3" tabindex="-1">2</button>
  </li>
  <li role="presentation" >
  	<button type="button" role="tab" id="slick-slide-control02" aria-controls="slick-slide02" aria-label="3 of 3" tabindex="0" aria-selected="true">3</button>
  </li>
 </ul>