[React] Swiper 사용하기

한 화면에 여러 정보를 보여주고 동적이고 질 좋은 페이지를 만들고자 할 때 캐러셀, 슬라이드 쇼는 개인적인 생각으로 빠질 수가 없다 생각한다. 당장 네이버 홈페이지만 가봐도 여러 개의 캐러셀을 통해 한 화면에서 많은 정보를 보여주고 다양한 컨텐츠를 담아내기에 프로젝트를 만들 때 사용하면 정말 좋은 요소이다.

 

CSS와 JS를 응용해서 만들어 낼 수도 있지만 난이도가 꽤 높고 번거롭다. 보다 쉽게 슬라이드 쇼, 캐러셀을 만들어내기 위해서 Swiper라는 라이브러리를 통해 원하는 대로 Custom 하여 사용해 보자

 

 

1. Swiper 란?

모바일 및 PC에서 구현하기 쉽고 사용하기 적합한 라이브러리이다.

간단한 HTML, CSS, JS 코드를 통해 반응형 슬라이더, 캐러셀 등을 만들어낼 수 있으며, 기본 디자인에서 사용자가 원하는 대로 커스텀 또한 가능하고 다양한 애니메이션 효과와 옵션 등이 있기에 퀄리티 높은 콘텐츠를 만들 수 있다.

 

 

 

 

 

 

 

 

2. Swiper 설치 및 기본

JS에서 사용하고자 한다면 아래 CDN을 통해 사용이 가능하다.

// JS
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
// CSS
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

 

 

npm을 통한 설치는 아래와 같다.

# npm
npm install swiper

 

설치 후 사용할 때 아래와 같이 import 해서 사용한다.

// import Swiper JS
import {Swiper} from 'swiper/react';
// import Swiper CSS
import 'swiper/css';

 

 

기본적인 사용법은 아래와 같다.

보통 많이들 사용하는 Navigation과 Pagination을 추가하고 간단한 옵션을 작성했다.

추가로 Navigation, Pagination 등의 모듈을 사용하고 싶으면 import 후 가져와 사용하면 된다. 기본 CSS 또한 지정되어 있으며, 추후 커스텀이 가능하다.

import {Swiper, SwiperSlide} from 'swiper/react';
import {Navigation, Pagination} from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import Image from 'next/image';

const SwiperTest = () => {

    const testSwiperSlide = ():any[] => {
        let result:any[] = [];

        for(let i:number=0; i<5; i++) {
            result.push(<SwiperSlide key={i} className="sw-item">
                <div>
                    <Image src={"/images/nature" + i + ".jpg"} alt="자연" width={350} height={250} priority/>
                </div>
            </SwiperSlide>);
        }
        return result;
    }
    
    return (
        <div>
            <h1>Hello World</h1>
            <Swiper className="sw-test"
                    modules={[Navigation, Pagination]}
                    speed={1000}
                    spaceBetween={5}
                    slidesPerView={1}
                    navigation={true}
                    pagination={{ clickable: true }}>
                {testSwiperSlide()}
            </Swiper>
        </div>
    )
}

export default SwiperTest;

 

Swiper 안에 SwiperSlide를 넣어서 슬라이드 구성을 할 수 있으며, 나는 반복문을 통해 생성하는 방식으로 하였다.

 

반응형

728x90

 

 

 

 

 

 

 

 

3. Swiper 옵션

swiper에는 다양하고 여러 옵션들이 있다.

옵션 사용법은 위에 작성한 소스와 같이 선언한 Swiper 내에 원하는 옵션을 작성하고 원하는 조정 값을 넣으면 된다.

또한, 별도의 모듈 설정 없이 사용이 바로 가능한 옵션이 있는 반면 모듈 import 후 사용해야 하는 옵션이 있다.

 

바로 사용이 가능한 옵션

• slidePerView : Swiper 한 페이지에 보일 슬라이드 개수 지정
• spaceBetween : 슬라이드 간의 간격 지정 ( px 단위 )
• speed : 슬라이드 회전 속도 지정 ( ms 단위 )
• loop : 슬라이드 무한 회전 활성화 설정 ( true / false ), 마지막 슬라이드에서 첫 번째 슬라이드로 이동
• grapCursor : 마우스 hover 시 그랩 커서로 변경, 마우스 드래그를 통해 슬라이드 이동 가능 ( true / false )
• touchRatio : 마우스 그랩으로 이동 방향 및 속도 지정 ( - 로 설정 시 마우스 드래그 방향과 반대로 이동 )
• breakpoints : 미디어 쿼리를 통해 지정한 화면 크기마다 원하는 Swiper 옵션 지정, 반응형 

 

모듈 설정 후 사용 가능한 옵션

• navigation : 이전 및 다음 슬라이드 이동 버튼 활성화 ( true / false )
• pagination : 전체 슬라이드 개수 표시 및 이동 버튼 활성화, clickable 옵션을 통해 이동 가능 ( true / false )
• autoPlay : 슬라이드 자동 회전 활성화 설정, 선언 후 delay 옵션을 통해 속도 조절 가능 ( ms 단위 )
• mouseWheel : 마우스 휠로 슬라이드 이동 활성화 설정 ( true / false )
• keyboard : 키보드로 슬라이드 이동 활성화 설정 ( true / false )
• effect : 슬라이드 이동 시 이펙트 효과 설정 ( '이펙트 이름' )

 

위 옵션들을 아래와 같이 작성을 해보았다.

<Swiper modules={[Navigation, Autoplay, Keyboard, Pagination, Mousewheel, EffectCoverflow]}
	speed={1000}
    	spaceBetween={15}
    	navigation={true}
    	loop={true}
    	autoplay={{ delay:1000 }}
    	mousewheel={true}
    	keyboard={true}
    	touchRatio={0}
    	pagination={{ clickable: true }}
        effect='coverflow'
    	breakpoints={{
    		100: {
        		slidesPerView: 1,
            		spaceBetween: 25
        	},
        	880: {
            		slidesPerView: 2,
        		spaceBetween: 25
        	},
        	1280: {
        		slidesPerView: 3,
        		spaceBetween: 25
		}}}>
</Swiper>

 

이 외에도 다양한 옵션과 이펙트가 있으니 아래 링크로 가서 찾아보고 사용하면 된다.

 

https://swiperjs.com/swiper-api#initialize-swiper

Swiper - The Most Modern Mobile Touch Slider