search

gutiguy / react-spring-3d-carousel

A 3D Carousel component for images built with React and utilizing react-spring for controlling slide transitions.
MIT License
102 stars 50 forks source link

Autoplay and Interval #32

Closed atiar-cse closed 1 year ago

atiar-cse commented 3 years ago

Hi,

Is there any way to implement Autoplay with Interval 3 seconds.

I am trying something like that but it's not working.

<Carousel slides={slides} offsetRadius="10" showNavigation={true} animationConfig={config} autoplay={true} interval={3000} />

Satyam-code143 commented 3 years ago

Yess!! Also, can you add another prop that will control the opacity of the back slides?

Satyam-code143 commented 3 years ago

@gutiguy and @kindeep Kindly please look into this. I need the autoplay and interval functionality it's very much needed in my project. Also if you can add an opacity prop to change the opacity of the back slides then that would be great. Thank You!!

kindeep commented 3 years ago

I'm not actively contributing here, just submitted a change that I needed for a project I was working on. If you're up for it, I'd suggest doing the same, fork and submit a PR. Both autoplay and opacity shouldn't be too hard, some sort of set timeout and a new css property.

Satyam-code143 commented 3 years ago

@kindeep I have learned ts in one day and tried to make the changes. I completed those changes without any tsc errors. But the main problem is I am not understanding how to test the changes that I have made before sending a PR. Can you please help me with this? Thank You!!

kindeep commented 3 years ago

npm run dev should run a testing server, src/dev/Playground.tsx would be the file that runs, you should be able to test your changes there, editing as needed at least locally. You can even test local npm packages in another local project, by doing npm i "~/path/to/react-spring-3d-carousel/" in that local project.

Satyam-code143 commented 3 years ago

@kindeep Thank you very much!! I have achieved what I wanted to. The autoPlay is working fine and I can able to set the timings also. But the problem is that I have put that in componentDidMount and when I tried to put that in componentDidUpdate it didn't work as expected. Now the only problem is that whenever we set the autoPlay to true we have to refresh the page. Only then do the changes take place. If you have any insight on this then that would be great. Else if that's ok then I'll send a PR.

Satyam-code143 commented 3 years ago

@kindeep Hey, I have sent the PR. Please merge!!

kindeep commented 3 years ago

@Satyam-code143 Again, I'm just another open source contributor. That'd be for @gutiguy

Satyam-code143 commented 3 years ago

@kindeep Thank you!!

Satyam-code143 commented 3 years ago

@gutiguy Hey, can you please merge my PR.

I really need that!!

Satyam-code143 commented 3 years ago

@atiar-cse Hey!! I have launched a new version of the same repo naming react-spring-3d-carousel-2 you can use that.

gutiguy commented 3 years ago

Hey @Satyam-code143 I reviewed your PR if you want it merged :)

Sorry for taking a while to get to it, been a bit busy lately.

gutiguy commented 1 year ago

Closed this as it's gotten stale. When https://github.com/gutiguy/react-spring-3d-carousel/pull/33 is merged I will release a version with the new props support.