How To Make an Infinite AutoPlay Image Slider Using JavaScript
Вставка
- Опубліковано 4 жов 2024
- #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.
Support this channel: / ndpniraj
Project Files
==========
drive.google.c...
Social Media
/ ndpniraj
/ ndpniraj
Other JavaScript Projects.
=====================
Popup Model Using JavaScript:-
• How to create a Popup ...
Responsive NavBar with Search Box:-
• Create a Responsive Na...
Modern Login Form:-
• How to Create a Login ...
Music Credit:-
• We Are Here - Declan D...
"Why can't you just give us the answer?!" LOL. I loved how you explained the logic at the beginning, this makes so much sense. Thanks for the vid.
I think examples are great way to explain things, so...
looked a lot of tutorials on youtube about dynamic sliders this is the only tutorial that helped me , THANKS A LOT!
You are most welcome.
I was looking for how to make infinite looping but I found no such learning tutorial.
But thank you ❤❤
I've been looking for a tutorial on the infinitive slider for days. I watched youtube videos, read blogs, but I couldn't find anything like this tutorial. Thanks youtube recommended the video to me. Liked and subscribed.
Thank you so much, this was the most useful one among the other tutorials which I could not learn because of the complicated expressions.
You're very welcome!
Great video i've been looking for this type of video and finally i undestod.
The real star among all those tutorials! Thanks!
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
I am so glad to hear that it helped you.
Thank you so much man u dont know how this tutorial help me out.keep doing this❤️
Glad to hear that and your welcome.
this is by far the best tutorial I have found on this subject. thank you Niraj
great man, explained like a pro...
Thank You so much bro. You make things quite simpler and explain them very well. I was so in need for this tutorial so thank you so much again and i wish you hit 100K super soon.
Thank you very much for your lovely wishes.
This guy is amazing. I learned alot. Thanks Bro. Indian are tech genius!
Thank you, It is very good
I'm glad you like it
I'm russian ,but i undestood all info which you had told! Like had been pressed)))
That's so sweet. Thanks for the appreciation.
Thanks for your tutorial!
Absolutely Brillant Explanation. Thank You!
Glad you enjoyed it!
Very nice - I learned a lot by watching it - thank you.
21:00 the key to the solution, that i probably need, will try it tomorrow :D
Thank you so much for this awesome tutorial
Thank you, the one that solves my problem
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.
This is called *Template String ``* which you can find above the tab key and below the esc (if you have keybord like mine). This is the special type of quote in JavaScript it allows us to write JavaScript code inside the quote for that we need to use *${...code}*. which is called string interpolation. ie: *console.log(`sum of 2 + 2 = ${2+2}`)*.
${2+2} will became executable JavaScript code. you can not do this with normal single or double quote.
I hope this will clear your doubt.
@@fsniraj Thanks very much for the insight! Found the character along with the tilde, too.
God bless you
you are a life saver bro. i wasted 7-8 hours just to find this comment
Awesome. Thank you bro....!
Thank you so much this is a great guide!
Your tutorial is very helpful. thank you so much.
You're welcome and thanks for visiting.
Great video and great practices. Would be very interesting adding touch events to the slider.
Great tutorial 👍🏼 helped a lot
Thanks for the appreciation
Thanks a lot brother.. Thumbs-up given!
Thanks, you helped me so much!
amazing work bud!!! , thanks million!!!
Glad you liked it!
Many thanks! Really helpful stuff!
Glad to read that it helps you and thank you for the appreciation.
Thank you for great video.
Thank you so much, you are a life saver
Thank you for a great tutorial. I wish to modify mine so that it displays the previous and next slides in separate frames before and after the main (index) image. I will have to play with your code.
Yes that's a great idea feel free to play around.
Great video the best I found and I looked hard. Quick question, you can see the last slide being added at the end of the transition, what can we do to make it smooth so you don't see it as it's being appended?
for that I guess we already removing the transition property.
thanks a lot greetings from México!
You are welcome bro.
Awesome Content....
I knew about the carousel pattern, but I was wondering how to make it dynamically because of the first and last Node copy, but there was a method called CloneNode. Thanks for your tutorial
it doesn't even work
bruh, next button is working properly but previous button is not working fine.
wouldn't it also work if we just rearrange the orders in the flex box?
Beautiful!
Thank you so much..... After reloading the page, the slides didn't start automatically unless I hovers on it. Please , how do I resolve it?
Thanks.
Please compaire your code with the source code.
this is really cool. Thank you ndp.
Nice to hear that you like it. You are welcome.
@@fsniraj I have a problem though, when I resize the window I have to reload the page in order for the slider images to take the full width. Do you have idea how to resolve this? Thank you so much.
I think there's something to do with this code:
slide.style.transform = `translateX(${-slideWidth * counter}px)`;
@@illonggafrau5210 yes I realize that I will reply u if I found the solution.
That would really be helpful. Thank you.
@@fsniraj I found the solution to this. I use jquery resize method.
Thank you!
Amazing ! Thank you !!!! 🙏
Thanks for the appreciation, Jeremy
Great Video
very good Miraz, It's still working fine. But I find a small problem- when I minimize my browser for 30 second or more, then slide are none visible (consol log tell me your first clone ID can't find-- example--- (slides[index].id === firstClone.id). It important to say I add let slides --
|
|
final example the function ---------
slide.addEventListener('transitionend', ()=>{
slides = document.querySelectorAll('.slide');
if(slides[index].id === firstClone.id){
//the problem is this firstClone.id findication problem.
slide.style.transition = 'none';
index = 1;
slide.style.transform = `translateX(${-slideWidth * index}px)`;
}
})
so I wait your answer, but I'm not very agger to know this problem, thanks🙂🙂
If you want to find answer on your own match your code with mine otherwise share your code with me only then I can solve your problem. And btw my name is Niraj 😁😁.
Thank you so much 😊
You're welcome 😊
Thank you a lot!!!!!!
this is much better than the other tutorials more professional. keep it up. worth the SUBBED. but what if we are using more than 4 pics? you just stated -2 on timestamp 27:38
it's simple it works for any amount of Images just remember to clone first and last elements as this video explains.
Thank you so much!
did everything, my arrows dont show
great content! cheers!
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 ?
It might be because of your images is not responsive. There is a very interesting way to make images responsive inside tailwind css but if you don't want to use tailwind css then you can follow the CSS way. Watch the first part of this video.
ua-cam.com/video/NX_NW6bt6_s/v-deo.html
you are very good man
Awesome video ++++++++++++++ 🙂
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?
makes 0 sense how this worked for you. 0.... if the index goes back to 1 then the slide resets and scrolls backward when you keep pressing next. the nodes are also only cloned once.
you are genius
Oh please I can't handle these heavy words. 🤩🤩 But thanks.
Is it possible to hyperlink individual slides? Would greatly appreciate any help, thanks again for a great tutorial!
Sure you can wrap the slide inside a tag
Really nice tutorial
Glad you liked it
Hi, none degree programmer can you put a another video on how to make the images slider indicator that control the slider work ( the circles that are located in the bottom of the image slider usually ) , and good work, love your constant
I will definately try.
Muito obrigado pelo video, me ajudou muito
If I have a box slider then the working is same or not???
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 :)
Send me a DM @ndpniraj with screen shot of the error and the code where you are getting error.
@@fsniraj i'm writing to you on Instagram!
great video, tnx
You're welcome
thank you very much, i am new to web design and coding so this helps a lot, keep making detailed vids like this; btw, i have een told in the industry js is getting less and less relevant. is it true/
I don't think so JS is the essential thing for web browser.
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...
Yes I know that, its your task to find out and teach me the solution.😊
the arrows wont work for me for some reason
Thank You for this tutoriel, it's really nice. I would like my slider to take all the width but at the end of the slider there a bit of white time before the first image charge again, do you have a solution to don't have this white space after the last slide?
Thank You
Share your code I will try, but I need some time.
@@fsniraj thank you,
I did the same code than you, even in your video we can see there is a few milliseconds before to be back at the first picture (before the overflow: hidden). Once the slide is finish we can see there is the just a bit of time
Make a zip file of your code and share the link on my fb or insta chat I will try to fix your problem.
Awesome video. However I am struggling to make responsive.
Yes lots of people facing the same problem I will try to make another video with responsive design.
Dear Non-degree Programmer, thanks for your tutorial, but what if I want to add another image slideshow in this same page, how would you do it? It will be very nice that you show me how. I will appreciate your kind reply.
First of all thanks for your appreciation. And the answer to your question is
, If you are following same code then you can easily increase the div with same class names and you can increase as many slides you want.
@@fsniraj
Yes, I tried but the second slideshow I add is not changing. Here is what I did so far:
drive.google.com/file/d/1TXvyQ34jlYJDFKth7IXVPHADzEmDrFYA/view?usp=sharing
I saw your code and found you are not trying to add any slides but you want to add completely separate slider in to the same page and you can not do that because javascript only selects the first elements that found in the document. So if you want to do this then you have to change class names and id of your second slider and repete same javascript code for second slider as well or create a reusable functions which allow you to select both sliders according to class names and id. I think it will help you :)
@@fsniraj
Thanks for this nice tutorial, but I also countering the same problem that I want to add completely separate slider into the same page. Could you maybe make another video about that? Because there are no other videos on UA-cam in terms of adding separate slider into the same page. If you can do it, I will appreciate your help very much!
Sure, I will try to make that very soon.
🔥🔥wow.. i have a problem i have matched with your code also . it is working great but when i refresh the page it says cannot read property cloneNode of undefined
have you linked your JS script at the bottom of your html file.
@@fsniraj i am using it in a functional component in react js. It works for once but if i refresh the page it throws the clone child error
It's because you are trying to clone before DOM rendered try to add your slider logics inside useEffect hook.
Thanks god for captions. great content
How can you make it responsive with the images on the sides, and make it look like a centered slider? please
There is a very interesting way to make images responsive inside tailwind css but if you don't want to use tailwind css then you can follow the CSS way. Watch the first part of this video.
ua-cam.com/video/NX_NW6bt6_s/v-deo.html
your tutorials are realy awesome.but why the number of the subscribers of channel are too poor???
Thank you very much for this lovely words and really I don't know about the numbers but I am working on it.
@@fsniraj carry on sir...😍😍
i hope you will be succeed very soom
_Awesome work _
*thank you so much *
thankx bro 👍🚩
You're welcome.
hi, may i ask why cloning the first and last images are important? what does it do for the code?
Yes sure you can ask, we are doing this because we want to give it fake infinite look. I hope if you watch the first section of this video cearfully you will understand everything. or you can watch this little section of this video ua-cam.com/video/IX6_VTFPOzU/v-deo.html
hi i would really like it if you helped me with something. When I look at the slider, when it passes a slide it goes to the 3rd slide. Whenever its supposed to go to the next it goes to the 3rd. Pls help
First of all match your code with my code and I think you did some mistake while declaring index value.
I appreciate
did it like you, but the slides don't change automatically, what I do
Compair your code with mine, I am sure you will find some mistakes in your code.
I cannot be sure if you are having the same problem as I was (I also was having problems getting mine to work as I progressed through this tutorial) ....
I found that I needed to use backticks around the code for the lines where Niraj typed: slide.style.transform = `translateX(${-slideWidth * current}px)`;
They are NOT apostrophes.
(NOTE: Backtick is the key next to the 1 on a QWERTY keyboard)
great :)
Are you able to make the same with a video slider ?
frankly speaking, I don't know
Thanks
You are welcome
Has anyone had issues with cloneNode undefined and unable to clone the first and last images?
May I help you ?
@@fsniraj I have attached my drive on the carousel with more images than what it currently shows.
drive.google.com/drive/folders/1_rbM2cu3PoNZ9blFEo0SsYG-fw1vRQEn?usp=sharing
Instead of having the buttons inside the photo, what I intend is to have it float around it, and the blue container is basically just the margin offset for the buttons (where the color will be removed)
However, as I update my js with yours, it doesn't clone the images as yours does.
Could you help me to take a look at this?
bro simply, use your js script tag at the bottom of your html
*
and then
*
could have used modulo
Many thanks. You help me a lot!
Thank you!!! helped a lot!
Thanks for your tutorial!
You are welcome!
please I have a question to ask you or took the javascript
send me you doubt at ndpniraj@gmail.com
Thank you so much!
You're welcome
@@fsniraj i had to finish one job quickly. I have 4 slides exactly 😂😉 in portfolio section.