[React]에서 swiper 사용법

swiper 라이브러리를 리액트에서 사용하는 것은
또 조금 달라서 구글과 사이트를 뒤져 완성된 나의 최종본 ..
시간 지나면 또 까먹으니 적어둬야 함

🐱 Swiper.js 사용방법

swiper 설치

cdn을 가져오는 방법도 있지만 나는 npm으로 설치해줬다

코드는 매우 간단함!

npm install swiper

터미널에 입력해서 설치가 되면 package.json에 추가되었는지 확인해주기

코드 작성

Swiper, SwiperSlide로 틀을 작성해준다

이때 import 필수! 없으면 에러난다
-> 태그에 빨간줄 뜰 때 커서 두고 ctrl + 스페이스바 눌러서 import 하면 편함

	import { Swiper, SwiperSlide } from "swiper/react";
    import { Navigation } from "swiper/modules"; //네비게이션 사용시에만
	import "swiper/css";
	import "swiper/css/navigation" // 네이게이션 사용시에만
    
    function SlideSwiper() {
    <div className="swiper-box">
      <Swiper {...swiperOption} className="swiper-list">
        <SwiperSlide>
          <div className="box-top">
            <div className="tit">제목</div>
          </div>
          <div className="box-con">
            내용
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="box-top">
            <div className="tit">제목</div>
          </div>
          <div className="box-con">
          내용
          </div>
        </SwiperSlide>
        생략
      </Swiper>
    </div>
    }

swiper에 옵션추가

swiperSlide 간의 간격, 한 번에 몇개가 보일 것인지 등등 옵션을 추가해준다

필요한 옵션을 넣어주고 Swiper에 { ... 변수명 } 으로 연결해준다
사실 Swiper에 옵션 직접 다 넣어줘도 되는데 그럼 코드가 너무 길어지니까 따로 빼준 것임
(className도 옵션에 넣어도됨)

import { Navigation } from "swiper/modules"; //네비게이션 사용시에만
import "swiper/css/navigation" // 네이게이션 사용시에만

function SlideSwiper() {
 const swiperOption = { //옵션
    centeredSlides: false, 
    simulateTouch: false, // 드래그 슬라이드
    slidesPerView: 4, //한번에 4개씩 보여줌
    spaceBetween: 20, //  사이 간격
    modules: [Navigation], // 사용하는 모듈 (여기서는 네비게이션)
    navigation: { 
      prevEl: ".btn-prev", //네비게이션 이전 arrow 명
      nextEl: ".btn-next", //네비게이션 다음 arrow 명
    },
 };
 
return (
  <Swiper {...swiperOption} className="swiper-list">
  생략
  </Swiper>
 );  
}

옵션 참고 : https://swiperjs.com/swiper-api#param-observeSlideChildren

옵션 안에 네비게이션 arrow 명을 지정해 준 이유는 각 화살표 커스텀을 해주기 위함이다
기본으로 쓰게 되면 각 swiperSlide 위에 화살표가 올라와 있음...

네비게이션(버튼) 커스텀

//위 옵션에 네비게이션 명 지정 필수
navigation: { 
   prevEl: ".btn-prev", //이전 arrow 버튼명
   nextEl: ".btn-next", //다음 arrow 버튼명
},

--------------------------------------------------

<div className="swiper-box">
  <button type="button" className="btn btn-prev">
     이전 //넣고 싶은 아이콘이나 텍스트
  </button>
  <button type="button" className="btn btn-next">
     다음
  </button>
  <Swiper>
    <SwiperSlide>
     생략
</div>

위치는 swiper 위나 아래 상관없다
옵션 네비게이션에 적었던 명만 똑같이 클래스에 넣어주면 된다
(typeScript 일때는 버튼 태그에 slot="btn-prev" 이런식으로 연결하는듯..?)

+아이콘 딱히 없을 때 antd 아이콘 사용하면 편하다

연결 후에 css에서 position으로 위치조정해주기!

스타일 scss

//slideSwiper
.swiper {
  &-box {
    position: relative;
    max-width: 1500px;
    margin: 50px auto 0;
    .btn {
      position: absolute;
      top: 50%;
      margin-top: -5px;
      background: transparent;
      .anticon {
        font-size: 20px;
      }
      &-prev {
        left: 0;
      }
      &-next {
        right: 0;
      }
    }
  }
  &-list {
    max-width: 1300px;
    .swiper-slide {
      padding: 12px 0px;
      text-align: center;
      background: #ccc;
      .box {
        &-con {
          padding-top: 10px;
        }
      }
    }
  }
}

++ Pagin 도 커스텀 가능함

modules: [Pagination],
pagination: {
      type: "fraction",
      el: ".pagin",
    } as const, // 이건 type 

<div className="pagin" />

끝