React) Swiper 사용하기

package.json
---
"swiper": "^6.8.4",

Main.tsx

import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Navigation, Pagination } from "swiper";
import "swiper/swiper.scss";
import "swiper/components/navigation/navigation.scss";
import "swiper/components/pagination/pagination.scss";


SwiperCore.use([Navigation, Pagination])
export default function Main() {
	return(
        <div>
          <Swiper
            className="banner"
            spaceBetween={50}
            slidesPerView={1}
            navigation
            pagination={{ clickable: true }}
          >
            <SwiperSlide>Slide 1</SwiperSlide>
            <SwiperSlide>Slide 2</SwiperSlide>
            <SwiperSlide>Slide 3</SwiperSlide>
            <SwiperSlide>Slide 4</SwiperSlide>
          </Swiper>
        </div>
    )

}

참고 https://developer0809.tistory.com/94

[#. React] React에서 swiper 사용하기, 배너 슬라이드 사용하기

개발자에게 에너지를 공급해주세요!! 하단 광고 클릭!!