In this article, we are going to make an Image Slider also known as carousel with a clean UI. It can slide the images with awesome animation and it...
For further actions, you may consider blocking this person and/or reporting abuse
Not really slider, better if images had translateX property to be animated (IMHO ofc)
And it's not a good practice to spam event handlers on the same elements inside a common parent - use event delegation instead.
But still good work!
Thanks for the tip man. 👍
Thanks for sharing
:)
Good work though I notice a slight bug if you click the same 'dot' twice and the screen goes blank. I think you need to check whether the same button has been clicked and do nothing.:)
Hello, I have implemented this check with the following code
Sorry for my english
I don't face this problem, but I'll look into it, if I found any. Thanks for the feedback. 👍
If it helps it happens to me in both Chrome and Firefox.
Screenshot attached.
Just checked on PC and a Mac in Firefox and Chrome on both (and Safari and ios on mobile) and it still doesn't work properly. It's not really usable in its current state and I suggest you test again.
Just click the current dot nav again (or another dot twice) and you will see that the displayed image scales to zero leaving a blank screen - that is not a nice effect. You then have to click again to bring it back.
The problem is evident on all browsers.
Oh I see, I'll fix that ASAP. Thanks mate.
Can i use this on my Xmas Sale website?
Sure absolutely
It's a nice work man.
👍
few months ago, I made this project beautifully with short Code
Oh that's cool, you can attach the link so more people can see it. 👍
If I use this image slider on my blog IDMLover, how much it effect the page speed. 🙄
I haven't checked it for the website, but if you want to do that, then you can use it in the local environment first and then check the performance of the page using this code in the website. The page loading speed could be different based on image resolution and sizes.
Really beautiful, nice work.
Thanks mate. :)
Amazing. Thanks for sharing
Thanks mate.
Very nice and clean. Thanks for this article.
I'm glad you liked it. :)
Thanks mate
One suggestion: you should try to implement this using class. It will be more structured.
Could you please elaborate more?
Like you can create a class that will implement all these carousel utils. If you want to implement multiple carousels, then it will be helpful as all share same logic, only css identifiers will be different
It could be possible, I am not sure though but I'll look into it, btw thanks for the suggestion.
For my own learning, is there a reason why you sometime use a normal function definition and sometime define a constant using an anonymous function? For example prevSlide.
No, there is no reason at all. You can use either function definition or the const one.
Very nice and clean. Thanks for this article.