[React Swiper] play, stop 버튼 만들기

* 참고 문서

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

Swiper API

 

<Swiper
  modules={[Pagination, A11y, Controller, Navigation, Autoplay]}
  pagination={{ type: 'fraction' }}
                loop={true}
  navigation={true}
                initialSlide={1}
  autoplay={{
    disableOnInteraction: true,
  }}
  className=""
>
	<SwiperSlide></SwiperSlide>
</Swiper>

Autoplay를 모듈에 작성해준다.

 

- disableOnInteraction -> 내가 만약 임의로 페이지를 넘겼을 때 (기본값이 true)

true : 자동 재생이 멈춤 (재생버튼이 있으면 재생버튼을 눌러줘야지 다시 autoplay가 된다)

false : 내가 임의로 넘긴 페이지부터 자동재생이 계속된다.

 

---

자동 재생 버튼 컴포넌트 만들기

 

아래 stackoverflow의 첫번째 댓글을 참고하면 좋을 것 같다.

https://stackoverflow.com/questions/71617336/how-to-use-useswiper-outside-a-swiper-instance

How to use useSwiper outside a Swiper instance?

 

자동재생 버튼을 만들 때는 따로 컴포넌트로 빼서 작업하는 편이 젤 best이다.

useSwiper must be used by components inside a Swiper element. --> 무조건 스와이퍼 안에 선언해줘야한다.

 

SwiperButtonPlay 컴포넌트를 만들었다.

import Link from 'next/link';
import React, { Dispatch, SetStateAction, useState } from 'react';
import { useSwiper } from 'swiper/react';

export type playProps = {
	playToggle: boolean;
	setPlayToggle : Dispatch<SetStateAction<boolean>>;
}

function SwiperButtonPlay ( props: playProps) {
	const swiper = useSwiper();
	const handlePlay = () => {
		if (props.playToggle) {
			swiper.autoplay.stop();
			props.setPlayToggle(false);
		}else{
			swiper.autoplay.start();
			props.setPlayToggle(true);
		}
	}
	
	return <button className={props.playToggle ? 'btn-play--off' : 'btn-play'} onClick={handlePlay} title={props.playToggle ? '정지버튼' : '재생버튼'}></button>;
}

export default SwiperButtonPlay ;

 

 

위의 컴포넌트를 내가 쓰려는 Swiper 안에 작성해주면된다.

const [playToggle, setPlayToggle] = useState(true);



<Swiper
  modules={[Pagination, A11y, Controller, Navigation, Autoplay]}
  pagination={{ type: 'fraction' }}
  loop={true}
  navigation={true}
  autoplay={{
    disableOnInteraction: false,
  }}
  className="swiper-wrapper"
>
  <SwiperSlide></SwiperSlide>
  
  <div className="playbtn__wrapper">
    <SwiperButtonPlay playToggle={playToggle} setPlayToggle={setPlayToggle} />
  </div>
</Swiper>