[#. React] React에서 swiper 사용하기, 배너 슬라이드 사용하기

 

 

 

 

 

html에서 swiper 사용하는 것과 조금 다르기 때문에 React에서도 swiper를 사용해 보려고 한다

 

swiperjs.com/react

Swiper React Components

 

 

 

 

 

 

① swiper 설치하기

 

npm install --save swiper

 

 

 

 

 

② 프로젝트/src/components/MainPage/MainPage.js

 

import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Navigation, Pagination } from "swiper";
import "swiper/swiper.scss";
import "swiper/components/navigation/navigation.scss";
import "swiper/components/pagination/pagination.scss";

SwiperCore.use([Navigation, Pagination])

function MainPage() {
  return(
    <div>
      <Swiper
        className="banner"
        spaceBetween={50}
        slidesPerView={1}
        navigation
        pagination={{ clickable: true }}
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
      </Swiper>
    </div>
  )
}

export default MainPage;

 

scrollbar도 사용 가능하지만 난 navigation과 pagination만 사용했다

 

 

scss 파일을 import할 때 에러가 발생한다면 sass 설치를 해야 한다

 

npm install --save sass

 

 

 

 

 

 

 

 

 

⑴ navigation

< > 화살표로 슬라이드를 교체할 수 있다

 

 

 

 

 

 

⑵ pagination

하단 중앙에 있는 원형 버튼을 클릭하면 해당 슬라이드로 넘어간다

 

 

 

 

 

 

 

 

navigation, pagination 외에도 다른 모듈들이 많다

 

 

 

 

 

 

이 중에서 자동으로 슬라이드를 넘기는 Autoplay를 추가로 사용해 보자

 

 

③ 프로젝트/src/components/MainPage/MainPage.js 수정

 

import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Navigation, Pagination, Autoplay } from "swiper";	// 추가
import "swiper/swiper.scss";
import "swiper/components/navigation/navigation.scss";
import "swiper/components/pagination/pagination.scss";

SwiperCore.use([Navigation, Pagination, Autoplay])	// 추가

function MainPage() {
  return(
    <div>
      <Swiper
        className="banner"
        spaceBetween={50}
        slidesPerView={1}
        navigation
        pagination={{ clickable: true }}
        autoplay={{ delay: 1000 }}	// 추가
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
      </Swiper>
    </div>
  )
}

export default MainPage;

 

 

 

 

 

 

delay를 1000으로 줬기 때문에 1초에 하나씩 자동으로 넘어가게 된다