[React/Next.js] 스와이퍼(swiper) 컨트롤러 커스텀하기

스와이퍼 UI 가져오기

https://swiperjs.com/demos#navigation

Swiper Demos

위 경로에서 CodeSandbox 중 React 선택

## App.jsx

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() {
  return (
    <>
      <Swiper navigation={true} modules={[Navigation]} className="mySwiper">
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide> 
      </Swiper>
    </>
  );
}

 

위의 코드에선 컨트롤러가 안보이지만 플러그인으로 인해 컨트롤러는 존재하는 상태다.

컨트롤러를 스와이퍼 태그의 외부로 빼네고 커스텀을 해보자.

 

스와이퍼 플러그인 설치

npm i swiper

 

컨트롤러 커스텀

import React, { useRef } from 'react';
// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation'; 
import { Navigation } from 'swiper/modules'; 

export default function About(){
    const prevRef = useRef(null);
    const nextRef = useRef(null);
    return(
        <>
          <div className='swiper_about'>
                    <Swiper spaceBetween={0} loop={true}  modules={[Navigation]}  navigation={{
                        prevEl: prevRef.current, //스와이퍼 외부에 컨트롤러 설정하기 
                        nextEl: nextRef.current,
                        }}
                        onBeforeInit={(swiper) => {
                        // 초기화 전에 네비게이션 버튼을 swiper에 할당합니다.
                        swiper.params.navigation.prevEl = prevRef.current;
                        swiper.params.navigation.nextEl = nextRef.current;
                        }} speed={700} className="mySwiper">
                        <SwiperSlide><img src="/about1.jpg" alt="" /></SwiperSlide>
                        <SwiperSlide><img src="/about2.jpg" alt="" /></SwiperSlide>
                        <SwiperSlide><img src="/about3.jpg" alt="" /></SwiperSlide> 
                        
                    </Swiper>
                    <div className="swiper-navigation">
                            <button className='swiper_prev' ref={prevRef}>&lt;&lt;~</button>
                            <button className='swiper_next' ref={nextRef}>~&gt;&gt;</button>
                    </div>
                    
                </div>
                 </>
    )
}

 

외부에 컨트롤러를 자유롭게 만들고 useRef를 사용하여 swiper에 할당만 해주면된다.

그 외에 텍스트는 태그 안에, 스타일은 내가 설정한 className을 사용하여 css에서 꾸며주면 된다.