본문 바로가기
[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 코드 console.log(swiper.realIndex + 1)} //이벤트 사용 > react 코드 import React from 'react'; import { Swiper, SwiperSlide } ..
[js] 자바스크립트스와이퍼 슬라이드 라이브러리, swiper.js 사용법 swiper.js 를 이용하여 사이트에 슬라이드를 적용합니다. 보통 사이트 메인 페이지의 네비게이션 아래 컨텐츠 부분에는 비주얼 슬라이드가 위치합니다. 홈페이지에 처음 들어갔을 때 가장 먼저 눈에 띄는 곳으로 사이트의 첫인상을 좌우하는 가장 중요한 부분입니다. 이 슬라이드는 스와이퍼라는 자바스크립트 라이브러리 사용을 추천합니다. 스와이프 이동, 버튼 이동, 화살표 이동, 자동 플레이, 루프, 반응형의 기능을 캐러셀 슬라이드에 적용이 모두 가능한 라이브러리입니다. swiper.js 사이트 구글에서 swiper js를 검색하여 사이트로 이동합니다. https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most mode..
반응형