How To Make an Infinite AutoPlay Image Slider Using JavaScript

#infiniteAutoPlaySlider #Slider #Carousel
While learning about JavaScript DOM, I always wanted to make a slider that has some functionality like the auto infinite slide show which can be controlled with some next and previous buttons.

But I never found any tutorials like that so, I decided to make my own and after doing some google search, reading some blog posts and watching some related videos I come up with this video.

This carousel has all the functionality which I talked about earlier. It can slide automatically and after the last slide again it starts from the beginning.

This slider stops while I move the mouse cursor inside this slider, and after that, I can click on those buttons to move this slider. Also, if I move the mouse cursor outside to this slider, it starts working again.

But guys before moving ahead let me clear you one thing that if you are here to see some quick-fix solution or some shortcut video then please you can leave this video right now because I am not going to show you guys any quick-fix instead I am going to teach you guys the main logic of this kind of slider how it works and how we can convert our thoughts into reality, so if you like this idea then hit that subscribe button if you haven’t already and let’s start the video.

Project Files
==========

Social Media

Other JavaScript Projects.
=====================
Popup Model Using JavaScript:-

Responsive NavBar with Search Box:-

Modern Login Form:-

Music Credit:-

[bartekx-qsvx]

21:00 the key to the solution, that i probably need, will try it tomorrow :D

[nanobit]

amazing work bud!!!, thanks million!!!

[fatinfuyad]

I was looking for how to make infinite looping but I found no such learning tutorial.
But thank you ❤❤

[ronniebrito]

Thank you, the one that solves my problem

[tonyp]

Awesome video. However I am struggling to make responsive.

[md.arifulislam]

Ohh... After search a lot, got a great logic.. Finally understood how to slide Infinite loop.. Thanks a lot man... Great person with great thought

[michaelmcgrath]

I faithfully entered all of the code without downloading the original script and it did not work and spent considerable time searching my code for errors and finally found that the single straight quotes used for these: slide.style.transform = `translateX(${-slideWidth * index}px)`; were different than normal single quote foot marks. They are small and point sideways. When I replaced these 4 lines with your code, the slider worked. What are these and why are they required? I am using Windows 10. I like the approach.

[bamboo]

What resources (videos or whatever) can you recommend for reaching a Javascript mastery level such as yours? Thanks

[amiinohmedyousuf]

thank you first bro but when i change the screen size of the computer the slider isn't working probably is it width problem or what ?

[mohammedirshad]

Absolutely Brillant Explanation. Thank You!

[BobbyBundlez]

this literally doesn't work... I did everything. maybe it works with 4 images. it only appends the fist and the last one how does that make sense for an infinite loop?

[ahmedmelfay]

Thank you so much, you are a life saver

[nicokojima]

The real star among all those tutorials! Thanks!

[miguelquintero]

How can you make it responsive with the images on the sides, and make it look like a centered slider? please

[elliedeguzman]

hi, may i ask why cloning the first and last images are important? what does it do for the code?

[marlonlopez]

Great video i've been looking for this type of video and finally i undestod.

[aburizaladinugroho]

i don't know, but when you minimize the window's browser or move to the other window, the transitionend event does not work in autoplay...

[ufukcovers]

Thank you so much, this was the most useful one among the other tutorials which I could not learn because of the complicated expressions.

[edivaldowagner]

did it like you, but the slides don't change automatically, what I do

[leonardocolombini]

Hi Niraj! Thank you so much from Italy for this interesting and precise video! I have a question for you... when i want to adapt to my project, the slides[0] result undefined and so the gallery doesn't work.
Can you help me to resolve it? It's for my university thesis :)