[react-slick] dot 버튼 활성화 유지로 인한 색상 중복 문제 해결

리액트 캐러셀 carousel 라이브러리 react-slickㅣdot 버튼 활성화 유지로 인한 색상 중복 문제 해결

 

 

문제 상황

 

버튼 클릭으로 세 번째 슬라이드로 이동 후 네 번째 슬라이드로 자동 전환될 때,

dot의 포커스 상태가 남아 opacity 값이 활성화 슬라이드의 버튼과 중복으로 적용되는 문제 발생

 

---

원인 

 

import 'slick-carousel/slick/slick-theme.css';

개발자 도구에서 현재 기본으로 적용되어 있는 slick-theme.css 스타일을 확인할 수 있는데 opacity를 보면,

.slick-dots li button:before - 기본 점 opacity:0.25

.slick-dots li.slick-active button:before - 활성화된 슬라이드의 점 opacity:0.75

.slick-dots li button:hover:before, .slick-dots li button:focus:before - 마우스 호버, 포커스 시 점 opacity:1

이렇게 적용되어있다.

 

즉, 한번 포커스 동작으로 opacity:1이 되면 다음 포커스 동작이 일어나기 전까지는

다른 슬라이드가 활성화되는 것과 별개로 이 버튼의 opacity가 계속 유지되는 것이다.

 

---

해결 방법

 

// index.css

.slick-dots li button:focus:before {
  opacity: 0.25 !important;
}

.slick-dots li button:hover:before,
.slick-dots li.slick-active button:focus:before {
  opacity: 0.75 !important;
}

 

1. 포커스 상태에서 투명도를 0.25로 강제 설정한다. (기존 투명도 0.25와 맞추기 위함)

2. 활성화된 슬라이드의 버튼 포커스 시에만 투명도를 0.75로 강제 설정한다.

    (동작상 button:hover:before는 건들지 않아도 되지만 투명도 값을 맞추기 위해 추가했다.)

 

위 스타일을 추가하면, 원래 일반적인 포커스 상태에서의 투명도 1이 기존의 0.25와 맞춰지면서,

결과적으로 '활성화된 슬라이드'의 포커스 동작 때만 한정적으로 적용되는 모습을 볼 수 있다.