react : Swiper js 사용시 onChange 와 같은 코드를 구현 하고 싶다면?

Swiper 를 통해 슬라이드를 구현 하면서 현재 위치 화면일때 classname 을 ' active' 라는 명을 주고 싶다면?

 

 

1 슬라이드 (현재 위치) classname = ' active '

2 슬라이드  classname = 없음

3 슬라이드  classname = 없음

★   현재 내 화면상 보이는 현재위치는 슬라이드 1 이다.

슬라이드 1에만 class name 을 active 가 되고 슬라이드 2, 슬라이드 3 에는 들어가지 않는다.

 

 

 

1 슬라이드 classname = 없음

2 슬라이드  (현재 위치) classname = ' active '

3 슬라이드  classname = 없음

★ 현재 내 화면상 보이는 현재 위치는 슬라이드 2 이다.

슬라이드 2에만 classname 이 active 가 되고 슬라이드 1 , 슬라이드 3 에는 들어가지 않는다.

 

 

 

 

예시 코드 

import React, { useState } form 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore from 'swiper'; // 타입지정을 위해 필요하다.

export default () => {
  const [swiper, setSwiper] = useState<SwiperCore>();
  
  const onClickCategory = () => {
    //카테고리 클릭 시 맞는 slide index를 찾는다.
    ...
    if (swiper) {
      	...
    	swiper.slideTo(index, 1000); //  해당 인덱스로 이동한다.
    }
    ...
  }
    
  const handleCategory = (activeIndex: number) => {
    /**
    현재 보이는 슬라이드의 인텍스를 기반으로 해당 카테고리를 찾아서
    카테고리를 활성화시켜준다.
   **/
    ...
  }
   
  return (
    <div>
    	<Category 
    		onClick={onClickCategory}
  			onChageSlide={handleCategory}
    	/>
    	<Swiper 
    		onSwiper={setSwiper} 
    		onSlideChange={(swiper) => handleCategory(swiper.activeIndex)}
  		>
    		<SwiperSlide></SwiperSlide>
			<SwiperSlide></SwiperSlide>
    	</Swiper>
	</div>
	)
}

 

🌈  Swiper 안에 react onClick 이나 onChage 처럼 함수안에 무언가 실행을 시켜주고 싶고, 파라미터로 값을 전달해 주고 싶었다.

🌈  onChageSlide 를 쓰면 해당 이벤트와 비슷하게 사용이 가능하다.

🌈  파라미터로 swiper 을 넘겨주게 되면 어떤값이 나올지는 handleCategory에서 console.log를 찍어보면 알 수 있는데 

swiper안에는 activeIndex 라해서 슬라이드가 0번째일때 0의값 1번째일때 1의 값 2번째 슬라이드 일땐 2의 값이 들어가 있다.

🌈  useState 를 이용해 해당 index 를 담아줄 변수를 만들어준다

🌈  handleCategory 안에서 setState ( index ) 를 해줘서 index 를넣어준다.

🌈  해당 state 를 이제 자유롭게 사용하면 된다.