Swiper로 이미지 슬라이드 구현하기

swiper로 구현한 이미지 슬라이드

 npm i swiper --save

• 프로젝트 폴더내에 swiper 다운받기

기본 구현코드

---

1. 이미지를 map()으로 구현하기

먼저 슬라이드에 들어가는 이미지의 양이 정해져있지 않고 다음에 또 데이터만 따로 수정하기위해 데이터를 따로 관리하였다.

const ImgSliderData = [
  {
    id: 0,
    src: "이미지주소",
    title: "title",
    text: "text",
  },
  {
    id: 1,
    src: "이미지주소",
    title: "title",
    text: "text",
  },
  {
    id: 2,
    src: "이미지주소",
    title: "title",
    text: "text",
  },

  ...
  
];
export default ImgSliderData;

• 슬라이드내에 들어가는 이미지의 양도 변경되지만 슬라이드 이미지 안에 텍스트를 넣는 경우도 고려하여 먼저 데이터를 만들었다.

import ImgSliderData from "./ImgSliderData";

function Slider() {
  return (
    <Swiper
      spaceBetween={10}				//슬라이드 간격
      autoplay={{
        delay: 2500,				//자동 시간
        disableOnInteraction: false,//스와이프 후 자동재생
      }} 
      loop={true}					//반복
      height={800}
      pagination={{ type: "fraction" }}
      navigation={true}
      modules={[Autoplay, Pagination, Navigation]} //modules에 기능 넣기
    >
      {ImgSliderData?.map((slideData) => {
        return (
          <SwiperSlide key={slideData.id}>
            <img src={slideData.src} alt="slideImg"/>
          </SwiperSlide>
        );
      })}
    </Swiper>
  );
}
export default Slider;

• 이미지 데이터를 import하여 불러오고 Swiper내에 배열로 만들어진 데이터를 map()으로 구현해준다.
• SiwiperSlide에 id를 key값으로 지정해주면 내가 입력한 id순서대로 슬라이드가 구현된 것을 볼수 있다.

2. 스타일 변경하기

swiper사용시 기본 스타일로 고정되어있어 조금의 수정이 필요했다.
일단 버튼사이즈와 컬러를 수정하려는데 Slider js에서는 불러온 SwiperSlide에 버튼이라는 태그 자체가 없다. 어떻게 해야할까?

개발자 도구를 열어보면 해당 태그의 클래스명을 알수 있다.

.swiper-button-prev {
      font-weight: bold;
      color: #fff;
    }
    .swiper-button-next {
      font-weight: bold;
      color: #fff;
    }

• 클래스명을 지정하여 스타일을 적용하면 바뀌어진 것을 볼수 있다.

3. 이미지 슬라이드 완성

✏️ 마치며

이전에 라이브러리 없이 이미지 슬라이드를 구현한 적이있는데 swiper라는 라이브러리를 사용하면 구현은 쉽게 된다. 또 Demo를 보면 슬라이드의 종류도 여러가지 이다. 하지만 커스터마이징하려면 그 라이브러리에 대해 따로 공부를 해야한다. 나만의 이미지 슬라이드를 만들고 싶다면 라이브러리 없이 구현하는 것을 추천한다.