Frontend/React-slick

[React-slick] React-slick 깜빡거리는 문제 해결 방법

Dogvelop 2023. 5. 17. 23:27

React-slick library 를 사용했을 때, 슬라이드 한 사이클을 돌고 난 이후에 깜빡거리는 문제가 발생.

해당 문제를 해결하는 방법은 아래와 같다.

 

먼저 React-slick slider settings에 아래 세팅을 추가해준다.

useTransform: false

 

그리고, Slider 컴포넌트가 있는 곳에서 css 를 override해준다.

.slick-slider .slick-track,
.slick-slider .slick-list{
 	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	transition-delay: 10ms;
}