yarn install swiper 로 CRA와 Next JS로 작업했던 프로젝트에 라이브러리를 설치했지만 둘 다 오류가 떠서 검색해 보니 버전 에러로 최신버전 말고 다시 설치를 했다
npm uninstall swiper
install Swiperjs version 6.0.2
npm install swiper@6.0.2최신 버전이라면
"swiper/swiper.css"
"swiper/components/navigation/navigation.css" ..이렇게 import 하지만
최신 버전이 아니라면 min.css 를 import 해야한다. min을 안 붙히면 css를 찾을 수 없다고 에러가 난다,
최신버전에 에러가 나서 버전 6대로 다운받아서 코딩
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Navigation, Autoplay, Pagination } from 'swiper';
import 'swiper/swiper.min.css';
import 'swiper/components/navigation/navigation.min.css';
import 'swiper/components/pagination/pagination.min.css';CRA 기반에서 Sass 관련 에러 가 나면 설치
npm install sass// index 변경 부분은 없어도 됨 (screen index 값에 따라 추가 작업 용도로 구현)
const [index, setIndex] = useState<number>(0);
const onChangeIndex = (num: number) => {
if (num === 4) setIndex(1);
else if (num === 0) setIndex(3);
else setIndex(num);
}; SwiperCore.use([Navigation, Pagination, Autoplay]); // Use
return (
<Container>
<Swiper
onActiveIndexChange={onChangeIndex}
className="home"
onSlideChange={(e) => onChangeIndex(e.activeIndex)}
loop={true} // 슬라이드 반복 여부
slidesPerView={1} // 한 슬라이드에 보여줄 갯수
navigation
pagination={{
el: '.swiper-pagination', // 페이지 버튼을 담을 태그 설정
clickable: true, // 버튼 클릭 여부
type: 'bullets', // 버튼 모양 결정 "bullets", "fraction"
}}
autoHeight={true}
// modules={[Autoplay, Navigation]}
centeredSlides={true}
autoplay={{ delay: 2000, disableOnInteraction: false }}
>
<SwiperSlide>
<SwiperContent src={images[0]} alt="swiper-img" />
</SwiperSlide>
<SwiperSlide>
<SwiperContent src={images[1]} alt="swiper-img" />
</SwiperSlide>
<SwiperSlide>
<SwiperContent src={images[2]} alt="swiper-img" />
</SwiperSlide>
<Pagenation className="swiper-pagination" />
</Swiper>
</Container>
)
FE