Hey everyone!
For this post, I decided to work with something I'm currently passionate about, React.
Recently, I'm having the opportunity to wo...
For further actions, you may consider blocking this person and/or reporting abuse
I can't thank you enough man! This is exactly what I needed. keep 'em coming!
Glad you liked :) now I'm thinking about making a more complex carousel, with animation and stuff 😃
oh, you should! I will be sure to be checking back to your channel for any update. And also try making it a bit more generic if possible, whereby dom nodes could be passed to the sliders instead of images or URLs.
Great idea! With that the carousel itself could be used for a few other things like a presentation, for instance. Will definitely consider that, thanks.
Yeah, because I actually used your logic but then passed objects into the slider to create a testimony carousel. Speaking of animations and modification, can you please guide me on how to make the carousel loop itself? I was thinking of using the setTimeout function inside the useEffect hook which will be invoking the nextSlider function after a certain interval. What are your thoughts on this? Thanks again for taking the reusability thing into consideration.
Hello mujeex,
So, considering that useEffect should be the equivalent of componentDidMount, that is sort of how I would approach the scenario you described. The only difference is that in my opinion it makes sense to continuously loop the carousel, so setInterval would make more sense than setTimeout (which would trigger only once after the component mounts).
Also, make sure that you clear up after yourself, meaning that when you set an interval after mounting a component you better clear that before the component unmounts :)
Amazing! It worked like a charm. Thanks a lot, Will. I am really looking forward to your reusable carousel.
Great Article, After developing this image carousel can we further create as mentioned in the image attached after clicking on any image in carousel?
Please let me know how can we achieve that.
Thank you
Hi Will,
I am super new to this and am having some issues getting my carousel going :o When I try and run my website I get an alert saying imageUrls are not defined.
I did try some stuff to fix this but no dice :( Any chance you have some advice on how to get around this issue?
It will be a good idea to add thumbnails of the images below the carousel where the user can click and also be touch friendly for mobile devices, I mean to support swipe instead of the buttons. Great article!
thank you , that is interesting
I appreciate this post, and I look forward to the more complex one.
@willamesoares any update on the advanced carousel?
Thanks for sharing bro, very helpful!
Hi nice work......how can i put 4 img in every one carousel?
Will Soares, you are literally soaring with your code.
Hi, great post! Where can I find the one about proper animation in react?