swiper event

스와이퍼 슬라이더로 작업중, 옆으로 더 넘길 슬라이드가 있을 때 그림자처리가 있고, 더 넘길 슬라이드가 없을 땐 그림자를 없애야하는 효과를 만들어야 했다.

몬가.. 더 넘길 슬라이드가 없을때는 이전/다음 버튼에 disable(?) 클래스가 붙는 거에 따라 그림자 처리를 하면 될것같았는데.. 몬가 잘안됨..

처음에는 slidechange 이벤트만 사용해서 하고싶었는데 몬가.. 몬가 안됨.. 약간 됐다 안됐다... 그래서 이 이벤트 말고 다른 이벤트도 사용해야겠다 싶었음!

먼저 usestate로 클래스가 있을 때 true false값을 변경 시켰는데 됐다 안됐다.. 그래가지구.. 추측하기론 slidesPerView의 값을 정해놓은게 아니라 auto로 해놔가지고 그런것같았다.

그래서 스와이퍼 슬라이드 문서를 뒤적뒤적해보니 다양한 상황에 사용할수있는 이벤트가 왕 많은걸 발견했다! (있을것 같긴했지만 찾는게 귀찮아서 한개로 비벼볼려고 했으나 실패했긴했지만..)

https://swiperjs.com/swiper-api#events

리액트에서 사용할땐 저기 앞에 on만 붙여주고 카멜케이스로 쓰면 된다는 사실~

모를 쓸까하다가 슬라이드가 제일 앞까지 스와이프 됐을 때 & 젤 뒤에 스와이프 됐을 때 이벤트가 발생되는 toEdge 이벤트를 사용했더니 아주 잘 됐다는 사실..

<Swiper
	spaceBetween={10}
    slidesPerView={"auto"}
    	navigation={{
    	prevEl: ".prev_btn",
    	nextEl: ".next_btn",
    }}
    modules={[Navigation]}
    onToEdge={() => {
    	let prev = document.querySelector(".prev_btn");
        let next = document.querySelector(".next_btn");
        prev.classList.contains("swiper-button-disabled") ? setPrevDisabled(false) : setPrevDisabled(true);
        next.classList.contains("swiper-button-disabled") ? setNextDisabled(false) : setNextDisabled(true);
            }}
     onSlideChange={() => {
     	let prev = document.querySelector(".prev_btn");
     	let next = document.querySelector(".next_btn");
        prev.classList.contains("swiper-button-disabled") ? setPrevDisabled(false) : setPrevDisabled(true);
        next.classList.contains("swiper-button-disabled") ? setNextDisabled(false) : setNextDisabled(true);
        }}
        >
        <SwiperSlide><img src={barImg1} alt="" /></SwiperSlide>
        ...생략...
        <div className="prev_dis" style={{ display: prevDisabled ? "block" : "none" }}></div>
        <div className="next_dis" style={{ display: nextDisabled ? "block" : "none" }}></div>
</Swiper>

암튼 이런식으로 써서 .. 했는ㄷㅔ.. 함수로 바꺼야대는데 귀찮아서 오늘은 여기까지 했당. 언젠간 미래의 내가 수정할듯..