DEV Community

Image Slider with JavaScript

Jatin Sharma on December 31, 2021

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...

Read full post

Eugene • Jan 2 '22

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!

Jatin Sharma • Jan 2 '22

Thanks for the tip man. 👍

Amisha Kulkarni • Dec 31 '21

Thanks for sharing

Jatin Sharma • Dec 31 '21

Paul O'Brien • Jan 2 '22

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.:)

krakoss • Jan 10 '23

Hello, I have implemented this check with the following code

// It helps to move the dot, it take "index" 
//as parameter and update the slideIndex
function moveDot(index) {
  slideIndex = index;
  const activeSlide = slides.querySelector("[data-active]");
  const nextPrevSlide = slides.children[slideIndex - 1];
    if(activeSlide !== nextPrevSlide)
        updateImageAndDot();
}

Sorry for my english

Jatin Sharma • Jan 2 '22

I don't face this problem, but I'll look into it, if I found any. Thanks for the feedback. 👍

Paul O'Brien • Jan 2 '22 • Edited

If it helps it happens to me in both Chrome and Firefox.

Screenshot attached.

Paul O'Brien • Jan 3 '22

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.

Jatin Sharma • Jan 4 '22 • Edited

Oh I see, I'll fix that ASAP. Thanks mate.

Domenico • Jan 1 '22

Really beautiful, nice work.

Jatin Sharma • Jan 1 '22 • Edited

Thanks mate. :)

mr_prathamesh0806 • Jan 3 '22

It's a nice work man.

Jatin Sharma • Jan 3 '22

👍

Muhammad Asif • Jan 3 '22

few months ago, I made this project beautifully with short Code

Jatin Sharma • Jan 3 '22

Oh that's cool, you can attach the link so more people can see it. 👍

Pawan • Jan 7 '22

If I use this image slider on my blog IDMLover, how much it effect the page speed. 🙄

Jatin Sharma • Jan 7 '22

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.

Chidiebere Chukwudi • Jan 1 '22

Amazing. Thanks for sharing

Jatin Sharma • Jan 1 '22

Thanks mate.

Timo • Dec 31 '21

Very nice and clean. Thanks for this article.

Jatin Sharma • Jan 1 '22

I'm glad you liked it. :)

Jatin Sharma • Jan 6 '22

Thanks mate

CT7567T • Jan 3 '22

One suggestion: you should try to implement this using class. It will be more structured.

Jatin Sharma • Jan 3 '22

Could you please elaborate more?

CT7567T • Jan 3 '22 • Edited

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

Jatin Sharma • Jan 3 '22

It could be possible, I am not sure though but I'll look into it, btw thanks for the suggestion.

mathiasdahl • Jan 3 '22

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.

Jatin Sharma • Jan 3 '22

No, there is no reason at all. You can use either function definition or the const one.

krakoss • Jan 10 '23

Very nice and clean. Thanks for this article.