React Swiper 사용하기

😁 React Swiper 사용해보기

✔️ 설치

$ npm i swiper

✔️ 기본으로 해야 할 것. (필수)

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';

✔️ 네비게이션이나, 스크롤바, 페이지네이션을 사용할 경우에는 아래 사항을 추가해줘야 한다.

import { Navigation, Pagination, Scrollbar } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

✔️ 완성 코드

import { Navigation, Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import './App.css'

const App = () => {
return (
  <div className="App">
  <Swiper
    modules={[Navigation, Pagination]}
    spaceBetween={50}
    slidesPerView={3}
    navigation
    pagination={{ clickable: true }}
    scrollbar={{ draggable: true }}
  >
    <SwiperSlide>Slide 1</SwiperSlide>
    <SwiperSlide>Slide 2</SwiperSlide>
    <SwiperSlide>Slide 3</SwiperSlide>
    <SwiperSlide>Slide 4</SwiperSlide>
    <SwiperSlide>Slide 5</SwiperSlide>
  </Swiper>
  </div>
);
};
export default App;

Swiper에다가 사용하고 싶은 옵션을 적어야 한다.
옵션은 여기서 참고하자. Swiper 사이트

위에 코드를 사용하면 이렇게 나온다.

✏️ 간단하고 쉬워서 사용하기가 편리했다. 그리고 데모에 멋진 효과들이 많았는데 다음에 꼭 사용해 봐야겠다.