[Swiper & React] Swiper로 화면 밖에 pagination 만드는 방법

만들고 싶은 슬라이드

---

문제점

---

React로 위와 같은 슬라이드를 만들려면 

<Swiper></Swiper> 안에 아래와 같이 적용을 해야 되는데

<Swiper pagination={true} modules={[Pagination]} className="mySwiper">
    <SwiperSlide>Slide 1</SwiperSlide>
    <SwiperSlide>Slide 2</SwiperSlide>
    <SwiperSlide>Slide 3</SwiperSlide>
    <SwiperSlide>Slide 4</SwiperSlide>
    <SwiperSlide>Slide 5</SwiperSlide>
    <SwiperSlide>Slide 6</SwiperSlide>
    <SwiperSlide>Slide 7</SwiperSlide>
    <SwiperSlide>Slide 8</SwiperSlide>
    <SwiperSlide>Slide 9</SwiperSlide>
  </Swiper>

이렇게 할 경우 Swiper가 hidden처리가 되어 있어 pagination을 따로 만들고 커스텀해주어야 된다.

 

해결방법

---

https://codesandbox.io/s/m54gfx?file=/src/App.jsx 

swiper-react-pagination-custom - CodeSandbox

swiper demo예제 중에서 pagination을 커스텀하는 방법이 나와있고,

이를 참고해서 만들면 됩니다.

 

import React, { useRef, useState } from 'react';
// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/pagination';

import './styles.css';

// import required modules
import { Pagination } from 'swiper/modules';

export default function App() {
  const paginationRef = useRef(null);

  const pagination = {
    el: paginationRef.current,
    clickable: true,
    renderBullet: function (index, className) {
      return '<span class="' + className + '">' + (index + 1) + '</span>';
    },
  };

  return (
    <>
      <div>
          <Swiper
            pagination={pagination}
            modules={[Pagination]}
            className="mySwiper"
          >
            <SwiperSlide>Slide 1</SwiperSlide>
            <SwiperSlide>Slide 2</SwiperSlide>
            <SwiperSlide>Slide 3</SwiperSlide>
            <SwiperSlide>Slide 4</SwiperSlide>
            <SwiperSlide>Slide 5</SwiperSlide>
            <SwiperSlide>Slide 6</SwiperSlide>
            <SwiperSlide>Slide 7</SwiperSlide>
            <SwiperSlide>Slide 8</SwiperSlide>
            <SwiperSlide>Slide 9</SwiperSlide>
          </Swiper>
      </div>
      <div className="swiper-custom-pagination" ref={paginationRef}></div>
    </>
  );
}

 

위예제에서 추가한 점은

1. Ref 추가하기

const paginationRef = useRef(null);

 

2. Ref 적용하기

<div className="swiper-custom-pagination" ref={paginationRef}></div>

 

3. pagination옵션 el에 Ref.current 넣기

  const pagination = {
    el: paginationRef.current,
    clickable: true,
    renderBullet: function (index, className) {
      return '<span class="' + className + '">' + (index + 1) + '</span>';
    },
  };

이 3가지만 적용하시면 pagination을 커스텀할 수 있습니다.

 

여기서 주의해야 될 점은 renderBullet에서 <span class=>에서 class를 className으로 쓰시면 오류가 납니다.

꼭 예제에 있는 그대로를 사용하시길 바랍니다.