Expose setSlide function

[hyochan]

Could you expose setSlide method in here?

I'd like to manually slide even without dragging by clicking on the element outside the div.

Hope this could be applied soon or I'd like to fork this repo and use for myself :)

Thanks for all the work in advance.

[Tobi-mmt]

Hey @hyochan, thanks for your input.

We allready thought about this and you can set the active slide with the activeIndex prop

For example

const foo = () => {
  const [sliderIndex, setSliderIndex] = useState(0)
  return (
    <button onClick={() => setSliderIndex(2)}>Move to third slide</button>
    <Slider activeIndex={sliderIndex}>
      <MySlide />
      <MySlide />
      <MySlide />
    </Slider>
)}

[hyochan]

@Tobi-mmt Thanks for the feedback. I"ve already tried that but that only works at the initial state. When you swipe children around and call setSliderIndex it won't do anything.

[mstruebing]

That should be that story, right?
https://farbenmeer.github.io/react-spring-slider/?path=/story/slider--with-activeindex-interval
https://github.com/farbenmeer/react-spring-slider/blob/master/src/index.stories.tsx#L63

What do you mean by "swipe children around" exactly?

[hyochan]

Sorry that I've not made it clear. To be specific, I want to tell you what I'm trying to build today.
I want to make my calendar carousel just like I did in flutter in flutter_calendar_carousel.

If I use below code with const [activeIndex, setActiveIndex] = useState<number>(0);, it won't do anything.

Also, it'd be good if we can set index sometimes without animation and sometimes with animation.

[hyochan]

@mstruebing Would above make you clear now? Please tell me if anything isn't clear! Thanks.

[mstruebing]

Ah I can reproduce what you mean. It seems that this is indeed not working and it is a bug in my opinion so we should fix it.
Thank you for making it clear, we will try to provide a proper patch soonish.

[mstruebing]

I added the ability to add a property setSlideCustom which needs a function with the following signature: (slide: number) => number - because the bug I've thought was totally correct react behaviour.
I hope that will help you

[github-actions]

🎉 This issue has been resolved in version 1.2.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀