Build a JavaScript IMAGE SLIDER in 15 minutes! 🖼️
Вставка
- Опубліковано 27 сер 2024
- #javascript #tutorial #course
This is an image slider program that you can create as a beginner. We will be using element selectors to create a nodelist of images to cycle through. An image to be displayed will have a class added to their classList that contains display: block. You will need at least a few images of your choosing to work with. I recommend image that are roughly the same size.
// 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
❮
❯
.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}
}
bro when you will begin python again😮💨
React do bro
bro continue the react series please...
O😂😆😆😆😃😃😃😀😀😀😁😁😁
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
the best videos for creating slider using javascript for beginners, love you bro
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!
very big fan and love your vids
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.
Thanks Bro code, you have fixed all my issues regarding slider in one video.
Love you brother 💓 finally I found after wasting many hours
Thanks for the video! Glad you explained things instead of using stupid music! You rock. 🚀
thank you
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.....
thanks a lot
ah so this is how tiktok works
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
Are you using classes cuz they are "less important" than id?
Can you make a Q&A video
I wanna ask something brother how to connect my sql private server data with JavaScript made software
Please help me reduce my image size. It is very big on screen. Entire code working fine. Thank you for yout
.slider img{height : 400px};
dont you think Arrays would be easier?
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
He's not doing what's easiest. He's teaching a lesson on how to apply skills to a situation
Early bro
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.
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.
@@batteo3318 thank you for the channel
F*ck, vette and JS in my recommendations. Good that's not November
9th comment