[React 리액트] Swiper 라이브러리 - Carousel 쉽게 구현하기

Carousel ❓

이미지 슬라이더(?)의 정식명칭은 캐러셀이다.

슬라이드쇼와 같은 방식으로 콘텐츠를 표시하는 UX 구성 요소이다. 아래 링크로 들어가면 다양한 carousel을 볼 수 있다.

https://ant.design/components/carousel

Carousel - Ant Design

 

이전에 React에서 carousel을 구현할 때 react slick 이라는 라이브러리를 사용했는데, 비슷한 라이브러리가 또 있다.

바로 Swiper !

 

📌 설치

npm을 통해 설치한다.

 npm i swiper

 

📌 데모 확인하기

튜토리얼 상단에서 Demo를 클릭하면 굉장히 다양한 carousel이 나온다. (react slick에 비해 굉장히 다양함)

https://swiperjs.com/demos

Swiper Demos

 

📌 예시 코드

// 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>
  );
};

Swiper, SwiperSlide 컴포넌트를 Import하고 swiper/css 또한 Import한다.

 

🔗 참고 / Carousel 관련한 또다른 라이브러리 - react-slicka

https://react-slick.neostack.com/

Neostack

---

🔗 출처

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider