제가 progress슬라이더를 사용하는중입니다.

[KIMYOUNGGWANG]

Description

현재 제가 리액트에서 사용하고있는 progress입니다. 그런데 이렇게되면 첫번째(0인덱스) 슬라이드에서 proress 가0 인상태로 시작해 2번째로 넘어가면 progress가 올라가는데, 제가 0번째 인덱스에서부터 그러니까 시작부터 그 0번에서 1번인덱스로 넘어가는 progress만큼 채우고 시작을하고싶은데 어떤 방법을 사용해야될지 모르겠어서 이렇게 질문을 남깁니다..!
아래 스크린샷이 제가 원하는 형태이고

아래 사진이 현재 저의 슬라이드 형태입니다.

Steps to check or reproduce

[WoodNeck]

Hello @KIMYOUNGGWANG!
In that case, I think you can try like this:

onMove={(e) => {
  const panelCount = flickRef.current.getPanelCount();
  const correctedProgress = (e.progress * (panelCount - 1) + 1) / panelCount;
  spanRef.current.style.width = correctedProgress * 100 + "%";
}}

---

안녕하세요~ 위 코드는 기존 0~1 범위의 progress를 (1/n) ~ 1로 리매핑하는 코드입니다.
잘 동작하지 않는다면 말씀해주세요

[KIMYOUNGGWANG]

@WoodNeck 안녕하세요! 우선 정말 친절하고 빠른 답변 감사합니다. 우선 저의 의도와 같이

0번에서 저렇게 시작을합니다.

하지만 마지막에서 다 채워지지않고, 다시 처음으로 돌아갈때 채워졌다가 첫번째사진으로 변경하고있습니다..!
이러할땐 어떻게 적용을 해야할까요..?

아 그리구 슬라이드의 처음 시작이 프로그래스바가 다 찬상태로 시작하는데 이게 원래 맞는걸까요??

[WoodNeck]

@KIMYOUNGGWANG
먼저 progress값이 정상으로 나오고 있는지 확인해보시는게 좋을 것 같습니다.
위 식대로라면, 다음과 같이 나오기를 기대하는데요

	progress	correctedProgress
첫번째 패널	0	1 / 패널 개수
마지막 패널	1	1

만약 값이 위와 같은데도 결과가 다르게 나올 경우에는, 페이지 CSS를 확인해보시는게 좋을 것 같네요
spanRef에 실제로 100% width가 적용되었는데도 크기를 전부 채우지 못할 경우 width가 참조하는 부모의 높이가 다른 엘리먼트일 가능성이 있을 것 같습니다.

그리고, 제 생각엔 슬라이드의 처음 시작이 프로그래스바가 다 찬상태로 시작하는건,
저 핸들러가 move 이벤트가 발생할때만 발생하도록 되어있고, 초기화 시점에는 move 이벤트가 발생하지 않기 때문인 것으로 보입니다.
React component의 didComponentMount 시점에 해당 spanRef의 width값을 설정하도록 변경하시거나,
엘리먼트 렌더링시에 기본 style값을 할당하시는게 좋을 것 같습니다.

예를 들면 다음과 같습니다.

<Flicking>
  <span style={{ width: `${(1 / 패널 개수) * 100}px` }}></span>
</Flicking>

[KIMYOUNGGWANG]

@WoodNeck 정말 주말인데 시간내 친절하게 알려주셔서 감사합니다! 처음에 100프로로 되어있던것은 해결했습니다..!
아 저 한가지 더 궁금한게있는데 슬라이드 자체에 fade plugin이 있긴한데 이게 옆으로 넘어가는효과말고 fadeinout효과로 다른사진보여주는 기능은 불가능한 것일까요??�

[WoodNeck]

@KIMYOUNGGWANG
현재 스펙으로는 직접 구현하셔야만 할 것 같습니다.
저희 데모에 카드 돌리는 데모를 보시면 비슷한 기능이 있긴 한데요,
이 경우 보이지 않는 패널을 추가해두고, progress를 이용하여 UI를 업데이트하시면 말씀하신 기능을 구현하실 수는 있습니다.

이를 더 쉽게 만들 수 있게 하기 위해 관련 스펙으로 virtualTranslate라는 항목을 로드맵에 추가해뒀는데요, v4 릴리즈 이후에나 추가할 수 있을 것 같습니다.

[KIMYOUNGGWANG]

@WoodNeck 정말 친절하신 답변 감사합니다. 많은 도움이 되었습니다!

[WoodNeck]

넵~ 이슈는 닫아두도록 하겠습니다. 추가 이슈가 있을 경우 다시 오픈해주세요~

[KIMYOUNGGWANG]

@WoodNeck 저 하나만 더 질문드릴게있는데요..! 혹시 마지막슬라이드에서 첫번째 슬라이드로 갔을때 progress바가 1에서 0으로 back으로 돌아가게 하려면 어떤식으로 progress를 조작해야될지 여쭤볼 수 있을까요? UI상으로 width가 100이 된상태에서 width가 뒤로해서 처음 width로 돌아가게 구현하고 싶습니다..!

[WoodNeck]

@KIMYOUNGGWANG
위에 구현된 버젼으로는 안되는건가요?
사용하시는 옵션이 어떤건지 몰라서 정확히 말씀드리기는 어려울 것 같은데요
0번 패널로 돌아갈 경우에 move 이벤트가 발생하고, 이벤트에 의해 width가 변경되어야 정상일 것 같은데요
혹시 move 이벤트가 발생하지 않는 경우라면 말씀해주세요