[React] Swiper.js를 사용해 이미지 슬라이더를 만들어보자.

Swiper.js를 이용한 이미지 슬라이더

Swiper.js란?

Swiper.js 란 React, Vue, Angular, Svelte 등 다양한 프레임워크에서 이미지나 페이지의 슬라이딩 혹은 스와이핑을 역동적으로 사용할 수 있게 도와주는 라이브러리이다.

Instagram 클론코딩 中 PostDetail 페이지에 Navigation 기능을 이용한 이미지 슬라이더를 만들기 위한 라이브러리로 Swiper.js를 사용했다. 이를 최소한의 코드로 요약하여 적어보려한다.

1. 설치

// terminal

npm i swiper

2. 사용 방법

// ImageSlider.js

import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
//Swiper 로 하위 SwiperSlide 컴포넌트들을 감싸준다.
import "swiper/components/navigation/navigation.min.css";
// Swiper Module인 navigation의 css 를 가져온다.
import "swiper/swiper.scss";
// 'npm i sass'를 통해 SASS를 설치한 후 scss를 가져온다.
import SwiperCore, { Navigation } from "swiper/core";
SwiperCore.use([Navigation]);
// Naviagtion 모듈을 사용하기 위해 SwiperCore를 가져와 설치해준다.
function ImageSlider(props) {
  return (
    <Swiper navigation={true}>
  <SwiperSlide>이미지1</SwiperSlide>
  <SwiperSlide>이미지2</SwiperSlide>
  <SwiperSlide>이미지3</SwiperSlide>
	</Swiper>
  );
}
export default ImageSlider;

3. 장점

ImageSliding을 위한 라이브러리는 매우 다양하다.
ex) AntDesign 의 <Carousel>: autoplay 등은 가능하지만 네비게이션 혹은 스와이핑 기능을 지원하지 않는다.

이에 반해 Swiper.js는

1.최소한의 props로 네비게이션 구현이 가능하여 간편하다.
2.이름에 걸맞게 Swiping 기능이 내재되어 모바일 환경에서 더욱 빛을 발한다.
3. Fade-Effect, 3D CSS Styling까지 가능하여 높은 확장성을 가지고 있다.

참고사이트

Swiper.js 공식 문서