[리액트] 스와이퍼 구현

공식문서의 내용을 참고할 예정이다
https://swiperjs.com/react

먼저 설치를 해야한다

npm i swiper

이 코드는 기본적인 스와이퍼의 구조이다

import React from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Autoplay, Pagination } from 'swiper/modules'

import 'swiper/css';
import 'swiper/css/pagination';

const Slider = () => {
    return (
            <Swiper
                pagination={true}
                modules={[ Autoplay, Pagination ]}
                loop={true}
                autoplay={{
                    delay: 3000,
                    disalbeOnInteraction: false }}
            >
                <SwiperSlide>Slide 1</SwiperSlide>
                <SwiperSlide>Slide 2</SwiperSlide>
                <SwiperSlide>Slide 3</SwiperSlide>
                <SwiperSlide>Slide 4</SwiperSlide>
            </Swiper>
    )
}

export default Slider

Autoplay

자동으로 슬라이더가 넘어가도록 해주는 모듈이다

Pagination

슬라이더의 페이지를 매겨주는 모듈이다

swiper/css

슬라이더가 하나씩 넘어가는 형태로 보이도록 해주는 css로, 핵심 스와이퍼 스타일만 포함한다

swiper/css/pagination

슬라이더가 페이지네이션 되도록 해주는 css로, Pagination 모듈에 필요한 스타일을 포함한다