사이드 프로젝트 18편 | 반응형 웹 캐러셀 제작하기 (swiper, react-slick)

🌙 이 블로그는 다크모드에서 코드 블록의 가독성이 더욱 향상됩니다. 화면 우측 하단의 달 모양 아이콘을 클릭하여 다크모드로 전환하시면 보다 쾌적한 읽기 환경을 제공받으실 수 있습니다.

 

---

 

 

메인 페이지 캐러셀 문제 발생

이미지가 밀리는 문제 발생

• 웹 너비 사이즈를 변경했을 때 고정된 이미지 이동 값 때문에 이미지가 밀리는 문제 발생

간단하게 overflow 되는 것을 보이지 않게 처리하고 클릭 이벤트가 발생할 때마다 보여지는 이미지의 위치를 x축으로 이동시키는 식으로 구현했다. 반응형으로 캐러셀을 구현하기에 꽤나 복잡할 것으로 보이고 시간적인 여유가 없어서 라이브러리의 도움을 받기로 했다.

 

가장 많이들 사용하는 라이브러리는 swiper와 react/slick 정도 일 것 같다.

 

swiper vs react-slick

(2024.04.12 기준)

npm 패키지의 다운로드 순위를 보여주는 사이트 npm trend를 참고해 보면 다음과 같다.

물론 swiper는 리액트에 국한된 라이브러리가 아니니 개인적인 생각으로는 리액트 생태계에선 비슷한 지위를 가지고 있지 않을까 예상해 본다.

다운로드 순위가 높은 swiper를 사용해 보기로 결정

 

 

swiper 공식 홈페이지

 

Swiper 공식 문서에는 swiper/react와 같이 리액트 사용자들을 위한 모듈들을 간단하게 지원해주고 있다. 그러나 위 내용을 보면 Swiper React 구성 요소는 향후 버전에서 제거될 가능성이 높으니 대신 Swiper Element로 마이그레이션 하는 것이 좋다고 한다. 

 

 

 

React doesn't fully supports web components yet (as for version 18). So the usage is basically the same as in HTML:

아쉽지만 현재 기준으로 리액트 버전 18의 경우 web components가 지원되지 않는다고 한다. 열심히 짜놨는데 호환이 안되면 두 번 일하게 될 테니 swiper/react를 사용하기로 결정했다.

 

 

1. Swiper 설치

NPM에서 Swiper를 설치할 수 있다.

$ npm install swiper

 

2. 사용 방법

기본적으로 Swiper는 추가 모듈 없이 핵심 버전만 내보낸다. 따라서 이를 가져와서 구성해야 한다.

import logo from './logo.svg';
import './App.css';
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Navigation } from "swiper/modules";
import SwiperCore from "swiper";
import "swiper/css";
import "swiper/css/navigation";
import { useRef } from 'react';

function App() {
  SwiperCore.use([Autoplay, Navigation]);
  const sliderImages = [
    "/test/2-1.png",
    "/test/2-2.png",
    "/test/2-3.png",
    "/test/2-4.png",
  ];
  const prevRef = useRef(null);
  const nextRef = useRef(null);
  return (
    <div className="App">
     <Swiper
          loop={true}
          slidesPerView={1}
          modules={[Navigation, Autoplay]}
          autoplay={{
            delay: 3000, 
            disableOnInteraction: false, 
          }}
       
          onInit={(swiper:any) => {
            swiper.params.navigation.prevEl = prevRef.current;
            swiper.params.navigation.nextEl = nextRef.current;
            swiper.navigation.init();
            swiper.navigation.update();
          }}
          className="absolute top-0 left-0 z-10 w-full h-full mySwiper"
          // Swiper 설정
        >
          {sliderImages.map((value, index) => {
            return (
              <SwiperSlide>
                <div>{index}</div>
                <img
                  src={`${value}`}
                  className="object-contain w-full h-full"
                  alt=""
                />
              </SwiperSlide>
            );
          })}
          <div className="absolute bottom-0 flex justify-around w-full">
            <div ref={prevRef} className="z-50 flex w-20 h-20 bg-red-50">
              Prev
            </div>
            <div ref={nextRef} className="z-50 flex w-20 h-20 bg-red-50">
              Next
            </div>
          </div>
        </Swiper>
    </div>
  );
}

export default App;

 

3. 캐러셀 스타일 지정하기

https://swiperjs.com/demos

Swiper Demos

해당 주소로 들어가면 다양한 캐러셀 디자인이 나와있다. 

react 버튼을 클릭하면 코드가 자세하게 나와있다. 해당 코드를 보고 마음에 드는 디자인을 적용해 볼 수 있다.

 

 

반응형 웹 캐러셀 적용 후

 

 

 

무한루프 설정, 딜레이 4초, 페이지네이션 불렛 설정

불렛 색상 파란색에서 프로젝트 포인트 색으로 변경하고 마무리!