Swiper를 사용해서, 슬라이드 만드는 법

Swiper를 먼저 받아야 한다.

import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/pagination';
import { Pagination } from 'swiper/modules';

export default function App() {
  return (
    <div style={{ height: '50vh', position: 'relative', background: 'white', fontSize: '52px', color: '#000', margin: '0', padding: '0' }}>
      <Swiper
        pagination={true}
        modules={[Pagination]}
        style={{ width: '100%', height: '100%' }}
      >
        <SwiperSlide
          style={{
            textAlign: 'center',
            fontSize: '52px',
            background: '#fff',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor:"pink"
          }}
        >
          Slide 1
        </SwiperSlide>
        <SwiperSlide
          style={{
            textAlign: 'center',
            fontSize: '52px',
            background: '#fff',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor:"skyblue"
          }}
        >
          Slide 2
        </SwiperSlide>
        <SwiperSlide
          style={{
            textAlign: 'center',
            fontSize: '52px',
            background: '#fff',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor:"lightgray"
          }}
        >
          Slide 3
        </SwiperSlide>
        <SwiperSlide
          style={{
            textAlign: 'center',
            fontSize: '52px',
            background: '#fff',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor:"yellowgreen"
          }}
        >
          Slide 4
        </SwiperSlide>
        <SwiperSlide
          style={{
            textAlign: 'center',
            fontSize: '52px',
            background: '#fff',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor:"cyan"
          }}
        >
          Slide 5
        </SwiperSlide>
      </Swiper>
    </div>
  );
}