React Swiper

1. React Swiper란?

React Swiper는 인기 있는 Swiper.js를 React 환경에서 쉽게 사용할 수 있도록 만든 라이브러리다.

• 터치 스와이프 지원
• 반응형 지원
• 다양한 효과(페이드, 큐브, 3D 등) 제공
• 커스터마이징 가능

---

2. 설치 방법

npm install swiper

React에서는 swiper/react와 스타일을 import해야 한다.

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

---

3. 기본 사용법

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

const MySwiper = () => {
  return (
    <Swiper spaceBetween={50} slidesPerView={3}>
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
    </Swiper>
  );
};

export default MySwiper;

• spaceBetween: 슬라이드 간 간격
• slidesPerView: 한 화면에 보여질 슬라이드 수

---

4. 추가 기능

4-1. 네비게이션 버튼

import { Navigation } from 'swiper';
import 'swiper/css/navigation';

<Swiper navigation modules={[Navigation]}>
  <SwiperSlide>Slide 1</SwiperSlide>
  ...
</Swiper>

4-2. 페이지네이션

import { Pagination } from 'swiper';
import 'swiper/css/pagination';

<Swiper pagination={{ clickable: true }} modules={[Pagination]}>
  <SwiperSlide>Slide 1</SwiperSlide>
  ...
</Swiper>

4-3. 자동 슬라이드 (Autoplay)

import { Autoplay } from 'swiper';
import 'swiper/css';

<Swiper
  autoplay={{ delay: 3000, disableOnInteraction: false }}
  modules={[Autoplay]}
>
  <SwiperSlide>Slide 1</SwiperSlide>
  ...
</Swiper>

---

5. 커스터마이징 예시

* 슬라이드 배경 이미지

<SwiperSlide style={{ backgroundImage: 'url(/img1.jpg)', backgroundSize: 'cover' }}>
  <h2>Slide 1</h2>
</SwiperSlide>

* 반응형 슬라이드

<Swiper
  breakpoints={{
    640: { slidesPerView: 1 },
    768: { slidesPerView: 2 },
    1024: { slidesPerView: 3 },
  }}
>
  ...
</Swiper>