Build a JavaScript IMAGE SLIDER in 15 minutes! 🖼️

[@BroCodez]

// IMAGE SLIDER const slides = document.querySelectorAll(".slides img"); let slideIndex = 0; let intervalId = null; document.addEventListener("DOMContentLoaded", initializeSlider); function initializeSlider(){ if(slides.length > 0){ slides[slideIndex].classList.add("displaySlide"); intervalId = setInterval(nextSlide, 5000); } } function showSlide(index){ if(index >= slides.length){ slideIndex = 0; } else if(index < 0){ slideIndex = slides.length - 1; } slides.forEach(slide => { slide.classList.remove("displaySlide"); }); slides[slideIndex].classList.add("displaySlide"); } function prevSlide(){ clearInterval(intervalId); slideIndex--; showSlide(slideIndex); } function nextSlide(){ slideIndex++; showSlide(slideIndex); } Document &#10094 &#10095 .slider{ position: relative; width: 100%; margin: auto; overflow: hidden; } .slider img{ width: 100%; display: none; } img.displaySlide{ display: block; animation-name: fade; animation-duration: 1.5s; } .slider button{ position: absolute; top: 50%; transform: translateY(-50%); font-size: 2rem; padding: 10px 15px; background-color: hsla(0, 0%, 0%, 0.5); color: white; border: none; cursor: pointer; } .prev{ left: 0; } .next{ right: 0; } @keyframes fade { from {opacity: .5} to {opacity: 1} }

[@usereternalyt]

bro when you will begin python again😮‍💨

[@l213dhanesh3]

React do bro

[@cinna_talks]

bro continue the react series please...

[@squadsync3]

O😂😆😆😆😃😃😃😀😀😀😁😁😁

[@fixauto5434]

I could never thank you more. I'm a student in prog at montreal and holy shit if I had you as a teacher I would have a perfect 100% attendance. You just get straight to the point and I love this so much. I usually don't comment but I'm at a point where I watch your videos even tho I don't need it. Keep up big love

[@umarmuzammil7332]

the best videos for creating slider using javascript for beginners, love you bro

[@D12_Diederik]

Awesome! Thank you. Adjusted it a tiny bit so I can have images with different sizes cover the slider div while being centered vertically and horizontally + added a small hover effect for the buttons. Great tutorial!

[@ntech2761]

Your coding is the real thing! I have been figuring it out, went to others (youtube) and still could not make my slides move without getting a gap! Thank you so much!

[@NawafXRMFC]

very big fan and love your vids

[@Tariquejamallkr]

Thanks Bro code, you have fixed all my issues regarding slider in one video.

[@abdulbasit9364]

Love you brother 💓 finally I found after wasting many hours

[@masengeshobruno-ug1fj]

thank you

[@mysticaccent]

I hope you get more views (millions of them) again, because you deserve all the happiness in the world. about a year ago my friend suggested to me a channel called 'brocode' and I searched it up on youtube and that was the best decision I ever made. I am 15 now, they are teaching us java at school but I am also learning python from your tutorials. thank you bro. it's people like you that make a difference.

[@kookylo3]

Thanks for the video! Glad you explained things instead of using stupid music! You rock. 🚀

[@user-kr5so3xk8f]

Bro: Thank you, for taking the time to give me A private lessons. You helped me grow, I cc now you must have great parenting skills. I have much to learn from you. So I will get to work on my "eye of the tiger". Thank you bro once more.....

[@megcodm8961]

can anyone help me im stuck at the initialize slider part it wont show the photo it keeps saing this Uncaught TypeError TypeError: Cannot read properties of undefined (reading 'classList') at initializeSlider i copied the exact same steps for the code but its not working

[@BeomTaeha]

same here bro, it didnt work

[@samirunlu9900]

It’s because the slider isn’t full (that’s why it give you that error message) , it’s because the images are to small or in a different format like in this video. And for me, overflow hidden doesn’t seem to properly work for some reason(you’ll see a scroller next on the page).

[@Hairynigga776]

Can you make a Q&A video

[@brileyharrell5866]

My css file is getting errors for the padding, color, border, and cursor on the slider button. Anyone know what I might’ve done wrong.

[@umarmuzammil7332]

thanks a lot

[@abdulbasit9364]

I wanna ask something brother how to connect my sql private server data with JavaScript made software

[@pastori2672]

ah so this is how tiktok works

[@ExamAscent-k3r]

Please help me reduce my image size. It is very big on screen. Entire code working fine. Thank you for yout

[@Tariquejamallkr]

.slider img{height : 400px};

[@futrozryby8474]

Are you using classes cuz they are "less important" than id?

[@laperplayz1388]

day #2 of asking: yo bro can you please make an advanced c++ tutorial that talks about vectors and polymorphism, encapsulation, abstraction, and the auto keyword, and also new features added to the latest version please.

[@batteo3318]

Give a try at Ferrabacus' course for encapsulation but dude, our bro is one man you can't ask him stuff like the newest features of c++ while he's doing a Javascript course. There are specific channels for that or wikis online.

[@laperplayz1388]

@@batteo3318 thank you for the channel

[@BinaryMaestro1]

dont you think Arrays would be easier?

[@BinaryMaestro1]

let x = ['image1.jpg', 'image2.jpg', 'image3.jpg']; i = -1; //next document.getElementById("button3").onclick = function() { i = i + 1; if (i >= x.length) { i = 0 }; document.getElementById("h1").textContent = x[i]; }; //previous document.getElementById("button4").onclick = function() { i = i - 1; if (i < 0) { i = x.length - 1 }; document.getElementById("h1").textContent = x[i]; } heres a project i did from your firsts videos and thats only a small part of the code tho also this is changing the h1 element name only because as i said its my old project

[@peaklegacy146]

He's not doing what's easiest. He's teaching a lesson on how to apply skills to a situation

[@thelavagod]

Early bro

[@troonder6274]

F*ck, vette and JS in my recommendations. Good that's not November

[@OdysseyAviation]

9th comment

[@cryptoengager]

Thank you