[Slick-slider] React slick 세팅/간격주기/드래그 중 클릭막기 - 드래그 중 클릭막기[3]

---

목차

1. 슬라이드 세팅
2. 간격주기 / hover 효과 영역
3. 드래그중 클릭 막기

---

드래그중 클릭 막기

1. slick APi이용

상태값을 이용해 드레그 중인것을 캐치하고 그 동안 클릭을 막는 방법을 이용합니다.

const [dragging, setDragging] = useState<boolean>(false)

const handleBeforeChange = useCallback(() => {
   setDragging(true);
  }, []);

const handleAfterChange = useCallback((i: number) => {
  setDragging(false);
  }, []);
 
 
 const settings = {
	...,
    beforeChange: handleBeforeChange,
    afterChange: handleAfterChange
    ...props.settings
  };

slick slide의 움직임을 캐치하는 method로 console.log를 통해 타이밍을 한번 확인해보시는걸 추천드립니다!

그런데 한가지 버그가 생길 수 있습니다.

슬라이드 사이 간격이 작아 마우스 드래그 했을때 실패할경우(슬라이드가 옮겨가지 않을경우) 클릭이 되기도 합니다.

이런 부분을 커버해 줄 수 있는 옵션은

touchThreshold 라는 옵션입니다.

 

swipe하여 슬라이드를 이동할 떄 슬라이드 너비를 1/touchThreshold 이상 스와이프하여 슬라이드를 전환 하는 옵션인데, 
이 값을 높여주게 되면 위 상황을 개선할 수 있습니다.

 

 

const [dragging, setDragging] = useState<boolean>(false)

const handleBeforeChange = useCallback(() => {
   setDragging(true);
  }, []);

const handleAfterChange = useCallback((i: number) => {
  setDragging(false);
  }, []);
 
 
 const settings = {
	...,
    touchThreshold : 100,
    beforeChange: handleBeforeChange,
    afterChange: handleAfterChange
    ...props.settings
  };