[ 플러그인 ] React Swiper

React Swiper

 

1. 설치 

npm i swiper

 

2. 

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

// Import Swiper styles
import 'swiper/css';

export default () => {
  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={3}
      onSlideChange={() => console.log('slide change')}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  );
};

 

 

https://swiperjs.com/demos

Swiper Demos

 

 

import React, { useRef, useState } from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";

import "./styles.css";

export default function App() {
  return (
    <>
      <Swiper className="mySwiper">
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
        <SwiperSlide>Slide 5</SwiperSlide>
        <SwiperSlide>Slide 6</SwiperSlide>
        <SwiperSlide>Slide 7</SwiperSlide>
        <SwiperSlide>Slide 8</SwiperSlide>
        <SwiperSlide>Slide 9</SwiperSlide>
      </Swiper>
    </>
  );
}

 

 

#app {
  height: 100%;
}
html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

 

https://codesandbox.io/p/devbox/swiper-react-default-dnfw9v?file=%2Fsrc%2FApp.jsx%3A1%2C1-27%2C1

https://codesandbox.io/p/devbox/swiper-react-default-dnfw9v?file=%2Fsrc%2FApp.jsx%3A1%2C1-27%2C1

 

 

 

 

 

https://swiperjs.com/react

Swiper - The Most Modern Mobile Touch Slider

 

 

1. slidesPerView: 한 번에 보여질 슬라이드 수를 설정합니다.
2. spaceBetween: 슬라이드 사이의 간격을 지정합니다.
3. initialSlide: 초기에 표시할 슬라이드의 인덱스를 설정합니다.
4. autoplay: 자동 재생 여부를 설정합니다.
5. loop: 슬라이드를 무한 루프로 반복할지 여부를 설정합니다.
6. pagination: 페이지 표시기를 활성화하고 위치를 설정합니다.
7. navigation: 이전 및 다음 버튼을 표시하고 위치를 설정합니다.
8. effect: 슬라이드 전환 효과를 설정합니다(예: slide, fade 등).
9. grabCursor: 마우스 커서가 스와이퍼 위에 있을 때 손가락 포인터로 변경할지 여부를 설정합니다.
10. keyboard: 키보드로 스와이퍼를 제어할지 여부를 설정합니다.
11. mousewheel: 마우스 휠을 사용하여 스와이퍼를 제어할지 여부를 설정합니다.
12. breakpoints: 반응형 디자인을 위한 미디어 쿼리와 함께 각 장치 크기에 대한 옵션을 설정합니다.
13. onSlideChangeStart/onSlideChangeEnd: 슬라이드가 변경될 때 실행될 콜백 함수를 설정합니다.
14. onSwiper: 스와이퍼 인스턴스를 얻기 위한 콜백 함수를 설정합니다.

 

 

Swiper 라이브러리의 modules 폴더에서 가져올 수 있는 추가 모듈들입니다.

 

1. Virtual: 가상 슬라이드를 생성하여 매우 많은 슬라이드를 효율적으로 처리합니다.
2. Keyboard: 키보드를 사용하여 스와이퍼를 제어할 수 있게 합니다.
3. Mousewheel: 마우스 휠을 사용하여 스와이퍼를 제어할 수 있게 합니다.
4. Navigation: 이전 및 다음 버튼을 추가하여 스와이퍼를 제어할 수 있게 합니다.
5. Pagination: 페이지 표시기를 추가하여 스와이퍼의 현재 위치를 나타냅니다.
6. Scrollbar: 스와이퍼에 스크롤바를 추가하여 현재 위치를 시각적으로 나타냅니다.
7. Parallax: 슬라이드에 패럴랙스 효과를 적용하여 스크롤 속도에 따라 배경이 움직이는 효과를 제공합니다.
8. FreeMode: 사용자가 자유롭게 스와이프할 수 있는 모드를 제공합니다.
9. Grid: 슬라이드를 그리드 형식으로 표시합니다.
10. Manipulation: 슬라이드를 드래그하거나 드롭하여 재정렬할 수 있게 합니다. (코어 버전에서만 사용 가능)
11. Zoom: 슬라이드를 확대하거나 축소할 수 있게 합니다.
12. Controller: 다른 스와이퍼 인스턴스를 제어할 수 있는 컨트롤러 역할을 합니다.
13. Accessibility (A11y): 웹 접근성을 향상시키는 기능을 제공합니다.
14. History: 브라우저 히스토리를 사용하여 슬라이드의 이전 및 다음 상태를 기록하고 제어합니다.
15. HashNavigation: URL 해시를 사용하여 슬라이드를 제어합니다.
16. Autoplay: 자동 재생 기능을 제공합니다.
17. EffectFade: 페이드 효과를 추가합니다.
18. EffectCube: 큐브 효과를 추가합니다.
19. EffectFlip: 뒤집기 효과를 추가합니다.
20. EffectCoverflow: 커버플로우 효과를 추가합니다.
21. EffectCards: 카드 효과를 추가합니다.
22. EffectCreative: 창의적인 효과를 추가합니다.
23. Thumbs: 작은 썸네일 슬라이더를 추가합니다.

 

 

1. swiper/css:
   • 이 폴더에는 오직 핵심적인 Swiper 스타일만 포함됩니다. 즉, 스와이퍼의 기본적인 디자인 및 레이아웃을 정의하는 스타일 시트가 들어 있습니다.
   • 이 스타일 세트에는 Swiper의 주요 기능 외에는 어떤 모듈 스타일도 포함되어 있지 않습니다.
   • 주로 사용자가 Swiper의 핵심적인 디자인을 사용하고자 할 때 이 폴더의 스타일을 사용합니다.
2. swiper/css/bundle:
   • 이 폴더에는 swiper/css 폴더의 스타일 외에도 모든 Swiper 모듈의 스타일이 포함됩니다.
   • 즉, Navigation, Pagination, Autoplay 등과 같은 Swiper의 모든 추가 기능에 대한 스타일도 여기에 포함됩니다.
   • 이 폴더의 스타일은 Swiper의 모든 기능과 함께 완전한 Swiper 스타일 세트를 제공하므로, Swiper를 다양한 기능으로 확장하여 사용하고자 할 때 유용합니다.

1. a11y: 웹 접근성을 향상시키기 위해 필요한 스타일 시트입니다.
2. autoplay: 자동 재생 기능을 구현하기 위해 필요한 스타일 시트입니다.
3. controller: 다른 스와이퍼 인스턴스를 제어하는 데 필요한 스타일 시트입니다.
4. effect-cards: 카드 효과를 구현하기 위해 필요한 스타일 시트입니다.
5. effect-coverflow: 커버플로우 효과를 구현하기 위해 필요한 스타일 시트입니다.
6. effect-creative: 창의적인 효과를 구현하기 위해 필요한 스타일 시트입니다.
7. effect-cube: 큐브 효과를 구현하기 위해 필요한 스타일 시트입니다.
8. effect-fade: 페이드 효과를 구현하기 위해 필요한 스타일 시트입니다.
9. effect-flip: 뒤집기 효과를 구현하기 위해 필요한 스타일 시트입니다.
10. free-mode: 자유롭게 스와이프하는 데 필요한 스타일 시트입니다.
11. grid: 그리드 레이아웃을 구현하기 위해 필요한 스타일 시트입니다.
12. hash-navigation: 해시 네비게이션을 구현하기 위해 필요한 스타일 시트입니다.
13. history: 히스토리 네비게이션을 구현하기 위해 필요한 스타일 시트입니다.
14. keyboard: 키보드 컨트롤을 구현하기 위해 필요한 스타일 시트입니다.
15. manipulation: 슬라이드 조작을 구현하기 위해 필요한 스타일 시트입니다.
16. mousewheel: 마우스 휠 컨트롤을 구현하기 위해 필요한 스타일 시트입니다.
17. navigation: 네비게이션 버튼을 구현하기 위해 필요한 스타일 시트입니다.
18. pagination: 페이지 표시기를 구현하기 위해 필요한 스타일 시트입니다.
19. parallax: 패럴랙스 효과를 구현하기 위해 필요한 스타일 시트입니다.
20. scrollbar: 스크롤바를 구현하기 위해 필요한 스타일 시트입니다.
21. thumbs: 썸네일 갤러리를 구현하기 위해 필요한 스타일 시트입니다.
22. virtual: 가상 슬라이드를 구현하기 위해 필요한 스타일 시트입니다.
23. zoom: 확대/축소 기능을 구현하기 위해 필요한 스타일 시트입니다.