[React] swiper로 이미지 슬라이드 구현하기

[공식문서]

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

 

 

 

설치하기

$ npm install swiper

$ yarn add swiper

 

swiper를 사용하고자 하는 페이지에서 import

// swiper - 이미지 슬라이더
import { Swiper, SwiperSlide } from "swiper/react";
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

나는 위 화면과 같은 슬라이더가 필요하니까 Navigation(좌우 화살표), Pagination(하단 아기동그라미)들을 import!

 

 

이제 swiper만 붙여주면 된다.. 이런식으로,,

<Swiper 
  className={styles.swiper} 
  navigation={true} // 좌우 화살표
  pagination={true} // 하단 동그라미
  loop={true} // 영원히 돌아가는,, 이미지 슬라이더
  modules={[Navigation, Pagination]}>
      <SwiperSlide>
        <img src={ testImg } alt="" />
      </SwiperSlide>
      <SwiperSlide>
        <img src={ testImg } alt="" />
      </SwiperSlide>
      <SwiperSlide>
        <img src={ testImg } alt="" />
      </SwiperSlide>
      <SwiperSlide>
        <img src={ testImg } alt="" />
      </SwiperSlide>
</Swiper>

 

테마 색은 App.js 에서 다시 지정해주었음

swiper 전체 테마 색이 흰색으로 지정되면 네비게이션, 페이지네이션 둘 다 흰색으로 변경된당

 

 

저번 프로젝트때는 진짜 어렵게 만든 것 같은데,,, 이지하군,, 라이브러리 최고,,

 

 

 

 

땅후니 띠부띠부씰,,, 젤리 열 개당 두 장만 들어있는건 너무 슬퍼요,,ㅜ 아까워서,,, 사진찍어놓기,,

그래도 젤 갖고 싶었던 스티커 두 장 당첨된 럭키걸,,, 맥북에 당장 붙이고 다닐 것!💙