slick slide button cursor 효과

slick slide 에 있는 botton 을 커스터마이즈하여 커서효과를 적용

slick 에서 제공하는 arrow 옵션에서 부모 태그인 button을 슬라이드에 들어가는 요소에 맞게 반으로 맞추고 지정된 이미지로 커서가 바뀌는 효과를 주려고 했다.

.slick-prev.slick-arrow,
.slick-next.slick-arrow {
  outline: none;
}

표시되는 아웃라인을 없애고

.slick-prev {
  position: absolute;
  z-index: 10;
  width: 50%;
  height: 100%;
  cursor: url(../img/left-arrow.png), w-resize;
  left: 0;
}
.slick-prev:before {
  content: none;
  z-index: 1;
}
.slick-next {
  position: absolute;
  z-index: 10;
  width: 50%;
  height: 100%;
  cursor: url(../img/right-arrow.png), w-resize;
  right: 0;
}
.slick-next::before {
  content: none;
  z-index: 1;
}

slick-prev, slick-next는 버튼태그이며, 반으로 같은 크기로 속성을 주었다. z-index를 줘서 요소 맨 앞으로 배치헸고 cursor: url 에 넣고 싶은 이미지를 불러왔고 각각 left와 right를 주어 경계선을 갭없이 나누었다. defaul로 들어가있는 slick arrow를 가려주기 위해 수도코드로 content를 none처리하였다.