swiper는 React 환경에서 뿐만 아니라 슬라이드를 사용하는 환경이면 생각나는 것이다.
아주 간단하게 슬라이드를 만들어주기 때문이다.
autoplay, navigation, 등등 필요한 왠만한 모든 것이 다 있다.
그런데, 작업을 하다가 한 가지 문제가 있었다.
autoplay로 설정된 슬라이드가 시작과 끝 부분은 정상적인 속도이지만
화면의 정면으로 가까워지면 점차 느려지는 것이다.
애석하게도 swiper는 이것을 해결하는 옵션을 가지고 있지 않은 것으로 보였다.
애매하게 말하는 이유는 내가 검색 키워드를 몰라서 찾지 못하는 것일 수 있다.
하지만 분명 이런 이동이 불편해지는 상황이 올 것이다.
그래도 다행인 것은 swiper의 css 설정이 어렵지 않은 것이였다.
해결하기 위해서 swiper에서 제공하는 옵션이 없다면 css 설정을 통해서 해결하려고 마음 먹었다.
transition-timing-function
요소의 이벤트 진행 속도를 설정하는 속성이다.
몇가지 설정이 있지만 그것은 검색하면 많이 나올 것이다.
여기서 핵심은 일정한 속도로 진행하는 설정도 있다는 것이다.
이것을 사용하면 아주 간단하게 해결이 가능했다.
.swpier-wrapper {
transition-timing-function: linear;
}
swiper-wrapper는 슬라이드의 요소를 감싸고 있는 wrapper이다.
이것에게 linear 속성을 주니 일정한 속도로 진행하는 슬라이드가 만들어졌다.
반응형
'React > 실험실' 카테고리의 다른 글
[React] CRA Path Alias 설정하기 (0) | 2023.04.11 |
---|---|
[React] styled-components theme (0) | 2023.03.20 |
[React] useForm (0) | 2023.03.05 |
[React] redux-persist (1) | 2023.02.11 |
[React] Compound Component 패턴 (1) | 2023.02.04 |
댓글