[react] swiper.js으로 timepicker 커스텀 (swipe slide event)

[react] swiper.js으로 timepicker 커스텀 (swipe slide event)

 

swiper.js를 커스텀하여

 timepicker를 구현합니다.

 

구현 화면

 

구현 영상

구현 내용

• swiper.js를 설치하여 react에서 사용 
• css는 tailwind 라이브러리 사용(중요하지 않아 아래 제공된 코드에서는 거의 삭제)
• onSliceChange로 이벤트 사용
• onSlideChange={(swiper) => console.log(swiper.realIndex + 1)} 로 현재 active된 슬라이드 표시
• initialSlide={숫자} 를 이용해 처음 시작 슬라이드 지정

 

swiper 코드

<Swiper 
    className='h-56' //높이 지정
    direction={'vertical'}
    slidesPerView={4}
    loop={true}
    loopAdditionalSlides={5}
    slideToClickedSlide={true}
    centeredSlides={true}
    onSlideChange={(swiper) => console.log(swiper.realIndex + 1)} //이벤트 사용
>

 

react 코드

import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';

const container = () => {
    const month = Array(12).fill().map((v, i) => v = i + 1)
    const day = Array(31).fill().map((v, i) => v = i + 1)

    return (
        <div>
            <Swiper
                className='h-56'
                direction={'vertical'}
                slidesPerView={4}
                loop={true}
                loopAdditionalSlides={5}
                slideToClickedSlide={true}
                centeredSlides={true}
                onSlideChange={(swiper) => console.log(swiper.realIndex + 1)}
            >
                {month.map(no => <SwiperSlide key={no} >{({ isActive }) => (
                    <div className={'p-2.5 text-gray_10 ' + (isActive ? 'underline' : '')}>{no}</div>
                )}</SwiperSlide>)}
            </Swiper>
            <span>월</span>
            <Swiper
                direction={'vertical'}
                slidesPerView={4}
                loop={true}
                loopAdditionalSlides={5}
                slideToClickedSlide={true}
                centeredSlides={true}
                onSlideChange={(swiper) => console.log(swiper.realIndex + 1)}
            >
                {day.map(no => <SwiperSlide key={no} >{({ isActive }) => (
                    <div className={'p-2.5 text-gray_10 ' + (isActive ? 'underline' : '')}>{no}</div>
                )}</SwiperSlide>)}
            </Swiper>
            <span>일</span>
        </div>
    );
};

export default container;

 

여기서 처음 시작하는 슬라이드는 initialSlide property를 이용해 지정할 수 있습니다.

initialSlide={//index}

 

swiper.js event 사용법

아래 공식문서에 많은 event 사용법들이 있으니 참조하세요.

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

Swiper API

 

 

 

참고한 코드

https://codepen.io/dogoku/pen/egdGEq