[react/swiper] react환경에서 완벽한 반응형 swiper 구현

[react/swiper] react환경에서 완벽한 swiper 구현

 

 

#swiperjs를 활용하여 완벽한 반응형 swiper 구현

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

 

사용해본 결과 swiperjs는 버전에 따라서, function들이 제법 바뀌어서 그냥 고정 버전으로 설명 후 해당 버전을 이용하는 걸 추천한다.

 

#설치 (11.0.7)

npx create-react-app
npm install swiper

 

# App.jsx

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) => {
            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;

 

 

#swiperjs