[React]리액트에서 Swiper 사용하기

리액트 스와이퍼, 스와이퍼css, 사용할 모듈을  import 해준다.

import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/swiper-bundle.css";
import SwiperCore, { Pagination, Navigation, Autoplay } from "swiper";

 

컴포넌트 내에서 어떤 모듈을 사용할 지 추가해준다.

SwiperCore.use([Pagination, Navigation, Autoplay]);

 

 

 

슬라이드 이미지에 loop={true}를 사용하면 슬라이드 <li>의 순서가 123이 아닌 3123이 되기 때문에 시작 시 첫 번째 이미지부터 나오지 않는다.

 

그래서 initialSlide를 추가했지만 무언가 충돌이 일어나는지 여전히 3번째 이미지부터 출력됐다... 

<Swiper
    initialSlide={1 : 몇 번째 이미지부터 출력}
    navigation={{
    	네비게이션 className(useRef로 했더니 에러 나서 className으로 지정했다.)
      prevEl: ".prevNav",
      nextEl: ".nextNav",
    }}
    slidesPerView={1 : 한 화면에 몇 개씩}
    centeredSlides={true : 이미지 가운데정렬}
    loop={true : 이미지 무한 슬라이드}
    onSwiper={setSwiper : 마운트 시 한 번만 실행}
    autoplay={{ delay: 3000, disableOnInteraction: false }: 자동 슬라이드 3초마다, 사용자가 슬라이드했어도 자동 슬라이드 유지 }
  >
  
    {/* 배너 이미지 */}
    {banners.map((bannerImg) => {
      return (
        <SwiperSlide key={bannerImg?.ban_id}>
          <Slide>
            <MainSlideImg
              src={이미지 주소}
              alt={이미지 설명}
            />
          </Slide>
        </SwiperSlide>
      );
    })}
    
    {/* 네비게이션 버튼 */}
    <SwiperNavWrap>
      <SwiperNavBox>
        <SwiperNavL className="prevNav">
          <img src={BannerArrow} alt="prev-arrow" />
        </SwiperNavL>
        <SwiperNavR className="nextNav">
          <img src={BannerArrow} alt="next-arrow" />
        </SwiperNavR>
      </SwiperNavBox>
    </SwiperNavWrap>
    
  </Swiper>

 

 

 

그래서 onSwiper={setSwiper}라는 속성을 추가했다.

onSwiper는 슬라이드가 처음 화면에 나타났을 때만 한번 실행이 된다.

 

슬라이드가 화면에 나타났을 때 slideTo를 사용해서 강제로 첫 번째 이미지로 보내줬다.

swiper.slideTo(1, 0);는 1번째(0번째 말고)이미지로 0초동안 슬라이드 된다.

0초동안 작동하기 때문에 슬라이드가 깜빡거리거나 움직이는 티가 나지 않고 자연스럽게(사용자 몰래?) 배너 리스트 첫 번째 이미지로 이동한다. 

 

Swiper 컴포넌트에 onSwiper는 setSwiper로 지정한다.

const [swiper, setSwiper] = useState(null);
const [banners, setBanners] = useState([]);

// 배너 이미지 불러와서 banners state에 저장
  const getBannerList = () => {
    serverController.connectFetchController(`bannerlist?type=store`, "GET", null, (res) => {
      if (res?.result === 1) {
        setBanners(res?.list ?? []);
      }
    });
  };
  useEffect(() => {
    getBannerList();
  }, []);

// banners가 변경됐고, banners가 null이 아닐 때 실행
  useEffect(() => {
    if (swiper !== null) {
      swiper.slideTo(1, 0);
    }
  }, [banners]);

 

 

전체 코드

import React, { useState, useEffect, useRef } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import styled from "styled-components";
import BannerArrow from "../../img/icon/icon_bannerArrow.svg";
import "swiper/swiper-bundle.css";

import SwiperCore, { Pagination, Navigation, Autoplay } from "swiper";

export default function MainBenner() {
  SwiperCore.use([Pagination, Navigation, Autoplay]);
  const [swiper, setSwiper] = useState(null);
  const [banners, setBanners] = useState([]);

// 배너 이미지 불러와서 state에 저장
  const getBannerList = () => {
    serverController.connectFetchController(`bannerlist?type=store`, "GET", null, (res) => {
      if (res?.result === 1) {
        setBanners(res?.list ?? []);
      }
    });
  };

  useEffect(() => {
    getBannerList();
  }, []);

  useEffect(() => {
    if (swiper !== null) {
      swiper.slideTo(1, 0);
    }
  }, [banners]);


  return (
    <Container style={{ background: "#000" }}>
        <BannerWrap className="MainBannerWrap">
          {
            <Swiper
              initialSlide={1}
              navigation={{
                prevEl: ".prevNav",
                nextEl: ".nextNav",
              }}
              slidesPerView={1}
              centeredSlides={true}
              loop={true}
              onSwiper={setSwiper}
              autoplay={{ delay: 3000, disableOnInteraction: false }}
            >
            
              {/* 배너 이미지 */}
              {banners.map((bannerImg) => {
                return (
                  <SwiperSlide key={bannerImg?.ban_id}>
                    <Slide>
                      <MainSlideImg
                        src={이미지 주소}
                        alt={이미지 설명}
                      />
                    </Slide>
                  </SwiperSlide>
                );
              })}
              
              {/* 네비게이션 버튼 */}
              <SwiperNavWrap>
                <SwiperNavBox>
                  <SwiperNavL className="prevNav">
                    <img src={BannerArrow} alt="prev-arrow" />
                  </SwiperNavL>
                  <SwiperNavR className="nextNav">
                    <img src={BannerArrow} alt="next-arrow" />
                  </SwiperNavR>
                </SwiperNavBox>
              </SwiperNavWrap>
              
            </Swiper>
          }
        </BannerWrap>
    </Container>
  );
}

 

 

https://swiperjs.com/react

Swiper React Components