DEV Community

Cover image for Image Slider with JavaScript

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...
Collapse
 
tsolan profile image
Eugene

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!

Collapse
 
j471n profile image
Jatin Sharma

Thanks for the tip man. 👍

Collapse
 
amisha2002 profile image
Amisha Kulkarni

Thanks for sharing

Collapse
 
j471n profile image
Jatin Sharma

:)

Collapse
 
paulobcss profile image
Paul O'Brien

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

Collapse
 
krakoss profile image
krakoss

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();
}
Enter fullscreen mode Exit fullscreen mode

Sorry for my english

Collapse
 
j471n profile image
Jatin Sharma

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

Collapse
 
paulobcss profile image
Paul O'Brien • Edited

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

Screenshot attached.

Thread Thread
 
paulobcss profile image
Paul O'Brien

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.

Thread Thread
 
j471n profile image
Jatin Sharma • Edited

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

Collapse
 
garrysmithers profile image
garrysmithers • Edited

Can i use this on my Xmas Sale website?

Collapse
 
j471n profile image
Jatin Sharma

Sure absolutely

Collapse
 
prathamesh0806 profile image
mr_prathamesh0806

It's a nice work man.

Collapse
 
j471n profile image
Jatin Sharma

👍

Collapse
 
muhammad_asif profile image
Muhammad Asif

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

Collapse
 
j471n profile image
Jatin Sharma

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

Collapse
 
idmlover profile image
Pawan

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

Collapse
 
j471n profile image
Jatin Sharma

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.

Collapse
 
dome68 profile image
Domenico

Really beautiful, nice work.

Collapse
 
j471n profile image
Jatin Sharma • Edited

Thanks mate. :)

Collapse
 
jovialcore profile image
Chidiebere Chukwudi

Amazing. Thanks for sharing

Collapse
 
j471n profile image
Jatin Sharma

Thanks mate.

Collapse
 
tim012432 profile image
Timo

Very nice and clean. Thanks for this article.

Collapse
 
j471n profile image
Jatin Sharma

I'm glad you liked it. :)

Collapse
 
j471n profile image
Jatin Sharma

Thanks mate

Collapse
 
jeel2308 profile image
CT7567T

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

Collapse
 
j471n profile image
Jatin Sharma

Could you please elaborate more?

Collapse
 
jeel2308 profile image
CT7567T • 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

Thread Thread
 
j471n profile image
Jatin Sharma

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

Collapse
 
mathiasdahl profile image
mathiasdahl

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.

Collapse
 
j471n profile image
Jatin Sharma

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

Collapse
 
krakoss profile image
krakoss

Very nice and clean. Thanks for this article.