Slick 슬라이드 페이지 버튼을 해당 이미지 사진으로 적용하기 (slick customPaging images)

slick.js

See the Pen Slick 슬라이드 페이지 버튼을 해당 이미지 사진으로 (slick customPaging images) by kimyangsun (@kimyangsun) on CodePen.

Slick 슬라이드 페이지 버튼을 해당 이미지 사진으로 적용한  코드펜 예제입니다. (slick customPaging images)

customPaging 을 통해 커스텀 하였습니다.

아래는 js 코드입니다 :)

 

$('.slider').slick({
  dots:true,
  prevArrow: '<a class="slick-prev" href="#"><i data-icon="ei-arrow-left" data-size="m"></i></a>',
  nextArrow: '<a class="slick-next" href="#"><i data-icon="ei-arrow-right" data-size="m"></i></a>',
  customPaging: function(slick, index) {
    var targetImage = slick.$slides.eq(index).find('img').attr('src');
    return '<img src=" ' + targetImage + ' "/>';
  }
});