Adding functionality to set frame index directly #126
Conversation
liuloppan
commented
Dec 1, 2019
liuloppan
commented
- Adding functionality to set the intital "current frame index" by passing it as a prop into Carousel.
- Adding the function setFrame to Carousel and passing it as a Widget prop ('setFrameHandler') which can be used by Indicator dots to transition multiple frames at once.
* Added functionality to pass currentFrameIndex as props in the cases where you may have a certain order but not necessarily want to start at index 0 * Added functionality to set a frame index directly with setFrame(index) which can be passed as the prop 'setFrameHandler' to Widgets in a similar fashion as 'nextHandler' and 'prevHandler'
setFrame now adds timeouts for 'next' and 'prev' which creates a smoother transition between frames.
|
Thanks @liuloppan! will look into it soon :D |
| const diff = Math.abs(index - this.state.currentFrameIndex); | ||
| if (index < this.state.currentFrameIndex) { | ||
| for (let i = 0; i < diff; i++) { | ||
| setTimeout(() => this.prev(), i * ms); |
There was a problem hiding this comment.
There would be a series of animation for switching to target frame, which works but not ideal, especially when user jumps between a lot frames. We need to switch to target frame directly. 🤔
There was a problem hiding this comment.
Ok I preferred to have the animation and to be able to control the animation time. For a small number of frames setting 'ms' to 0 will visually have the same effect, but for many frames this could be an issue as you say. But I will look into creating a function that allows changing it directly.
There was a problem hiding this comment.
@amio I have updated the PR. Also updated index.js so that the example is using this functionality. Currently currentFrameIndex i passed as prop and is set to 3 to show how it works, but it could be removed.
Now you can chose to have the animation if you put in how many milliseconds (ms) it should animate between. Otherwise (default) is that the state.currentFrameIndex is set as well as state.movingFrames (which has a special override case). Which means we don't need to render any frames in between.
There was a problem hiding this comment.
@liuloppan Great! Just a few changes:
- since
loopcannot work withcurrentFrameIndex, we should log a warning in case of that, - let's keep the default demo as original, add some description of
currentFrameIndexin README.md
|
