[React] Swiper.js Cheat sheet

---

1. Custom Navigation

import { Navigation } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Swiper as SwiperCore } from 'swiper/types';

function CustomSlider() {
    const swiperRef = useRef<SwiperCore>();
    const [init, setInit] = useState(true);
    const [prevDisabled, setPrevDisabled] = useState(false);
    const [nextDisabled, setNextDisabled] = useState(false);

    return (
        <div>
        
        {/* Custom Prev Button */}
            <button
                type="button"
                onClick={() => {
                swiperRef.current?.slidePrev(); // swiper의 slidePrev 실행
                setNextDisabled(false); // 슬라이드 변경 시 비활성화 상태 해제
                }}
                className={init || prevDisabled ? 'disabled' : ''} // 처음 진입이거나, 첫번째 슬라이드이면 네비게이션 비활성화
            >
                <PrevIcon/>
            </button>
         {/* Custom Prev Button */}
         
            <Swiper
                onBeforeInit={(swiper) => swiperRef.current = swiper} // ref에 swiper 저장
                modules={[Navigation]}
                spaceBetween={40}
                onSlideChange={() => setInit(false)} // 슬라이드 변경 시 실행
                onReachBeginning={(e) => setPrevDisabled(true)} // slide가 처음에 닿으면 실행
                onReachEnd={(e) => setNextDisabled(true)} // slide가 마지막에 닿으면 실행
            >
                {slideList.map((e) => (
                    <SwiperSlide key={e.id}>
                      <Slide/>
                    </SwiperSlide>
                ))}
            </Swiper>

         {/* Custom Next Button */}
            <button
                type="button"
                onClick={() => {
                    swiperRef.current?.slideNext(); // swiper의 slideNext 실행
                    setPrevDisabled(false); // 슬라이드 변경 시 비활성화 상태 해제
                }}
                className={nextDisabled ? 'disabled' : ''} // 마지막 슬라이드이면 네비게이션 비활성화
            >
            <NextIcon/>
            </button>
         {/* Custom Next Button */}
         
        </div>
    );
}