[라이브러리]Slick-slider의 dot을 커스텀할 수 있는 방법

 

 

안녕하세요 무택입니다 :)

오늘은 Slick-slider라이브러리의 dot을 커스텀할 수 있는 방법에 대해 써보려고 합니다. 이 라이브러리는 웹개발에 있어서 쓸 일이 정말 많은데 커스텀하지 않은 버전의 슬라이드도 정말 좋지만 상황에 따라 커스텀해야 할 경우도 생기더라고요. 그럴 때를 위해 써보려고 합니다.

 

 

Slick-slider의 dot을 커스텀할 수 있는 방법

HTML/CSS

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />


 <style>
 * {
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.slick_wrap {
  width: 100%;
  background-color: #ccc;
}

.slick_wrap .slick_slider_div {
  width: 100%;
}

.slick_wrap .slick_slider_div .slick-dots {
  bottom: 0;
  background-color: rgba(0, 0, 0, .5);
}

.slick_wrap .slick_slider_div .slick-dots li {
  width: calc(100% / 3);
  margin: 0;
  line-height: 40px;
  height: 40px;
}

.slick_wrap .slick_slider_div .slick-dots li a {
  display: block;
  color: #fff;
  transition: all .3s;
}

.slick_wrap .slick_slider_div .slick-dots li.slick-active a {
  background-color: #0054ff;
}

.slick_wrap .slick_card {
  height: 300px;
  text-align: center;
  line-height: 300px;
  background-color: #ccddff;
}
 </style>


<div class="slick_wrap">
  <ul class="slick_slider_div">
    <li class="slick_card">slick 01</li>
    <li class="slick_card">slick 02</li>
    <li class="slick_card">slick 03</li>
  </ul>
</div>

 

 

JS

$('.slick_slider_div').slick({
  autoplaySpeed: 2500,
  dots: true,
  slidesToShow: 1,
  customPaging: function (slider, i) {
    var thumb = $(slider.$slides[i]).data();
    if (i == '0') {
      i = "슬라이드1";
    } else if (i == '1') {
      i = "슬라이드2";
    } else if (i == '2') {
      i = "슬라이드3";
    }
    return '<a class="dot"><span>' + i + '</span></a>';
  },
});

 

Codepen

See the Pen [라이브러리]Slick-slider 닷 커스텀하기 by TytanLee (@TytanLee) on CodePen.

 

 

 

코드 설명

dot의 디자인을 바꾸기 위해서는 "slick-dots"클래스에 css코드를 주면 커스텀할 수 있습니다. html상에서는 없지만 js로 만들어지는 클래스이기 때문에 css에서 위 클래스에 대해서 코드를 작성해 주면 원하는 디자인의 dot을 만들 수 있습니다.

 

그리고 dot부분에 텍스트를 넣고 싶다면 

customPaging: function (slider, i) {
    var thumb = $(slider.$slides[i]).data();
    if (i == '0') {
      i = "슬라이드1";
    } else if (i == '1') {
      i = "슬라이드2";
    } else if (i == '2') {
      i = "슬라이드3";
    }
    return '<a class="dot"><span>' + i + '</span></a>';
}

이 부분에서 i의 값에 넣고 싶은 텍스트를 넣어주고 아래 return 값에는 넣고 싶은 html코드를 넣어주면 html문서 상에서 코드를 확인할 수 있습니다. 

 

그러면 return에 들어간 a태그나 span태그도 ".slick-dots a" or ".slick-dots span" 이런 식으로 css를 직접 커스텀할 수 있습니다. 저 부분에 넣고 싶은 디자인을 넣는다면 다양한 디자인으로 커스텀할 수 있으니 잘 활용해 보시길 바랍니다😊