[React] Swiper 를 이용한 이미지 슬라이드 + style 입히기

여러장의 이미지가 있을때 이를 슬라이드 하여 보여주고 싶었고 이를 위하여 swiper.js를 사용해보았다.

기본적으로 제공되는 파란색깔의 네비게이션과 페이지네이션이 마음에 들지 않았기에 이를 다른 색깔과 이미지로 바꿔서개발을 진행하였다.

 

 설치

npm install swiper

 

import

import SwiperCore, { Navigation, Pagination } from "swiper";
import "swiper/swiper.min.css";
import "swiper/css/navigation"; // 네비게이션 사용
import "swiper/css/pagination"; // 페이지네이션 사용

SwiperCore.use([Navigation, Pagination]);

 

구현 코드

<StyledSwiper
  navigation={{
    prevEl: '.swiper-button-prev',
    nextEl: '.swiper-button-next',
  }}
  pagination={{ clickable: true }} // 밑에 .. 생기는거
  slidesPerView={1} // Swiper 한 번에 보여지는 slide 개수
  direction="horizontal" // 가로 방향
  spaceBetween={5} // 이미지 사이의 거리 px단위 ex: 5px
>
  <div className="swiper-button-prev">
    <LeftIcon size={28} color="#ff6701"/>
  </div>
  <div className="swiper-button-next">
    <RightIcon size={28} color="#ff6701" />
  </div>
  {images.map((image, index) => (
  	<StyledSwiperSlide key={index}>
	    <ModalImg url={image}/>
  	</StyledSwiperSlide>
  ))}
</StyledSwiper>

images 는 이미지가 담긴 배열로 map함수를 통하여 SwiperSlide를 반복해주었다.

 

스타일 코드 

import styled from "styled-components";
import { Swiper, SwiperSlide } from "swiper/react";
import { FiArrowLeftCircle, FiArrowRightCircle } from "react-icons/fi";

export const StyledSwiper = styled(Swiper)`
  display: flex;
  flex-direction: column;
  justify-content: center;

  .swiper-button-prev, .swiper-button-next {
    &::after {
      content: none;
    }
  }

  .swiper-button-prev {
    ${LeftIcon} {
      display: block;
    }
  }

  .swiper-button-next {
    ${RightIcon} {
      display: block;
    }
  }
  
  .swiper-pagination {
    // height 속성을 사용하면 pagination 높이를 설정 할 수 있다
  }
  
  // 아래에 보여지는 페이지네이션 각각의 bullet의 크기와 색깔을 정할 수 있다
  .swiper-pagination-bullet {
    height: 10px;
    width: 10px;
    background-color:#ff6701; // 원하는 색상으로 변경
  }
`;

export const StyledSwiperSlide = styled(SwiperSlide)`
  display: flex;
  justify-content: center;
  align-items: flex-start;
`;

export const LeftIcon = styled(FiArrowLeftCircle)`
`
export const RightIcon = styled(FiArrowRightCircle)`
`

 

 

 

다음은 이미지를 제외한 화면이다. 양쪽에 있는 화살표는 react-icon을 사용해 가져와 커스텀한 이미지 navigation이고 

하단에 위치한 것은 pagination으로 코드작성 부분에서 clickable를 true로 해줬기에 클릭이 가능하다.