codestates / codestates/Memory-It
[Dev Log] UI : Experimental 터치슬라이더 구현하기 #5
- Dominant language
- JavaScript
- Stars
- 1
- Forks
- 2
- PR merge metrics
- No merged PRs in 30d
Description
## 추가사항
- 슬라이더는 어느정도 구현이 됐다고 생각한다. 여기서 한가지 추가한 것은 터치 또는 클릭으로도 사진을 이동할 수 있는 버튼이다.
```jsx
const onPrevPic = () => {
if (currentIdx.current > 0) {
pictureWrapperRef.current.style.transform = `translateX(${
(currentIdx.current - 1) * pictureContainerRef.current.offsetWidth
}%)`
currentIdx.current -= 1
setPositionByIndex()
}
}
const onNextPic = () => {
if (currentIdx.current < allImage.length - 1) {
pictureWrapperRef.current.style.transform = `translateX(${
(currentIdx.current + 1) * -pictureContainerRef.current.offsetWidth
}%)`
currentIdx.current += 1
setPositionByIndex()
}
}
```
- 코드를 보면 알 수 있듯이 특별한 점은 없다. 슬라이더를 위해 만든 코드들을 재사용하고 있다.
- 작동방식도 슬라이더처럼 currentIdx와 offsetWidth를 이용해서 translate값을 조절해주고있다.
- 그후 setPositionByIndex를 호출해 최종 currentTranslateValue와 prevTranslateValue를 적절한 값으로 저장하고 그안에서는
- setSliderPosition를 호출해서 최종적으로 보여줄 이미지를 정한다.
https://user-images.githubusercontent.com/84060219/149632952-7e907c9b-7470-4395-80dc-f4024ee81cf1.mov
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.