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

만들고 싶은 슬라이드

---

 

문제점

---

앞서 작성한 pagination과 같이 swiper의 hidden 때문에

swiper옵션으로 navigation을 적용하고 navigation을 밖으로 빼서 사용하면 navigation이 안 보이는 현상이 발생한다.

<>
  <Swiper navigation={true} modules={[Navigation]} 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>
</>

 

해결방안

---

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/navigation';

import './styles.css';

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

export default function App() {
  const [swiper, setSwiper] = useState(null);
  
  return (
    <>
    <div className="navigation-btn-wrap">
        <button onClick={() => swiper.slidePrev()}>{icon.navigationPrev}</button>
        <button onClick={() => swiper.slideNext()}>{icon.navigationNext}</button>
    </div>
     <div>
          <Swiper //
            navigation={true} 
            modules={[Navigation]}
            onBeforeInit={(swipper) => setSwiper(swipper)}
            className="mySwiper" 
          >
            <SwiperSlide>Slide 1</SwiperSlide>
            <SwiperSlide>Slide 2</SwiperSlide>
            <SwiperSlide>Slide 3</SwiperSlide>
            <SwiperSlide>Slide 4</SwiperSlide>
          </Swiper>
      <div>
    </>
  );
}

onBeforeInit : 초기화 직후 이벤트가 시작됩니다.

 

참고 자료

https://hoime.tistory.com/97

Swiper Navigator(화살표) 바깥으로 빼기