[javascript] Slick 슬라이더 페이징, 커스텀 내비게이션, 진행바 달기 - slick slider custom navigation

Swiper는 페이징, 내비게이션, 프로그레스바 기능들이 이미 있지만 Slick은 만만치 않습니다.
근데 Slick을 써야할 경우가 있을 수도 있잖아요,,
 
Slick은 기본적으로 dots, arrows가 있는데

dots는 슬라이드 수 만큼 생성되고 클릭하면 해당 슬라이드로 이동하는 기능이며,

arrows는 화살표 버튼으로 이전/다음 슬라이드로 이동하는 기능입니다.

이 기본 기능들을 원하는대로 탈바꿈하고 프로그레스 바를 만들어 봅시다.
 
완성본

 
dots는 슬라이드수에 비례하여 나타나는 기능이므로 이 dots와 API를 활용해서 페이징을 만들 수 있습니다.

appendDots: '.slick--visual__paging',
customPaging: function (slider, i) {
	return  '<span>'+(i + 1)+'</span><span>/</span><span>' + slider.slideCount + '</span>';

appendDots로 클래스를 지정하면 해당 클래스의 하위로 'slick-dots' 요소가 삽입됩니다.
이를 통해 원하는 포지션에 dots를 배치할 수 있습니다.
 

 
customPaging은 슬라이드 카운트를 이용해 원하는 HTML구조를 짤 수 있습니다.
저는 페이징 마크업을 '현재 슬라이드', '/', '총 슬라이드' 3개의 span태그로 나누어 CSS를 개별 적용하게 만들었습니다.
사실 내가 짠 커스텀 페이징은 살짝 야매이다.
왜냐면
1/4
2/4
3/4
4/4
위와 같이 모든 수가 나열되지만 모두 감추고 현재 active된 li의 내용만 표시하게 하여 페이징 기능을 구현했기 때문이다.

 
그 다음은 프로그레스바(진행바)입니다.

<div class="visual__progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>

.visual__progress {
    height: 4px;
    background-color: #FFF;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, #555, #555);
    z-index: 2;
  }

이것은 웹에서 떠도는 코드 https://codepen.io/mjtweaver/pen/pEZYgQ 를 바탕으로 만든 버전입니다.
 
기존 코드는 백그라운드 '0% 100%'(x축 y축)에서 슬라이드 진행 상태에 따라 '100% 100%'까지 채워지며 진행상태를 나타내는 방식입니다.
위 코드는 슬라이드를 움직이기 전 초기 상태에서는 프로그레스바가 안채워져있는데, 저는 로드된 상태에서도 프로그레스바가 채워져있기를 원했습니다.
그래서 조금 변형을 했습니다.
 
네개의 슬라이드 중 첫번째 슬라이드라면 4분의 1이 채워져있어야하니,

이렇게 퍼센트를 계산한 initPercent를 변수로 만들어 해결했습니다.

initPercent = 100 / 4(슬라이드 개수)

 

$('.visual__progress').css('background-size','25% 100%'); 

디폴트 값이 이렇게 되는 셈입니다.

 

이후

visual.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    var calc = ((nextSlide + 1) / slick.slideCount) * 100;
    progress
      .css('background-size', calc + '% 100%')
      .attr('aria-valuenow', calc);
  });

이렇게 beforeChange 이벤트로 퍼센티지가 바뀌는 방식입니다.

 

커스텀 내비게이션은 HTML코드로 원하는 내비게이션을 만든 후 API로 커스텀 클래스를 지정해주면 됩니다.

<div class="visual__arrows">
   <button class="visual-prev">👈</button>
   <button class="visual-next">👉</button>
 </div>

 

prevArrow(이전 슬라이드 버튼), nextArrow(다음 슬라이드 버튼)에 클래스를 부여하면 이전/다음 버튼 기능이 정상 작동하는 것을 확인할 수 있습니다.

 

728x90

완성본 코드펜 예제

See the Pen Slick slider custom arrows, paging, progress bar altogether by sel (@wimmwell) on CodePen.

코드펜 예제 이미지 엑박 뜨는데 본문 내용과 무관하니 무시해 주세요