Build a JavaScript IMAGE SLIDER in 15 minutes! 🖼️

Показать описание

#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 = img");
let slideIndex = 0;
let intervalId = null;

document.addEventListener("DOMContentLoaded", initializeSlider);

function initializeSlider(){
if(slides.length > 0){

intervalId = setInterval(nextSlide, 5000);
}
}

function showSlide(index){
if(index >= slides.length){
slideIndex = 0;
}
else if(index < 0){
slideIndex = slides.length - 1;
}

slides.forEach(slide => {

});

}

function prevSlide(){
clearInterval(intervalId);
slideIndex--;
showSlide(slideIndex);
}

function nextSlide(){
slideIndex++;
showSlide(slideIndex);
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="slider">
<div class="slides">
<img class="slide" src="image1.jpg" alt="Image #1">
<img class="slide" src="image2.jpg" alt="Image #2">
<img class="slide" src="image3.jpg" alt="Image #3">
</div>
<button class="prev"
<button class="next"
</div>

<script src="index.js"></script>
</body>
</html>

.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}
}

BroCodez

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

fixauto

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

umarmuzammil

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!

ntech

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.

mysticaccent

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

Tariquejamallkr

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

luisgonzales

Love you brother 💓 finally I found after wasting many hours

abdulbasit

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

krsoxkf

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

megcodm

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

futrozryby

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

abdulbasit

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

ExamAscent-kr

dont you think Arrays would be easier?

BinaryMaestro

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.

laperplayz

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

troonder

Build a JavaScript IMAGE SLIDER in 15 minutes! 🖼️

Build a JavaScript IMAGE SLIDER in 15 minutes! 🖼️

How To Build A Simple Javascript Image Slider | No Libraries

How to Create Image Slider in HTML, CSS & JS - Step by Step | JavaScript Projects

How to create an Image Slider in HTML CSS and JavaScript Step by Step | Creative JS Coder.

How To Create An Animated Image Carousel With CSS/JavaScript

Create A Slider Crazy Effects Using HTML CSS And Javascript

Javascript Image Slider with Next and Prev buttons | Html, Css and Javascript slider

Image Slider - With Auto-play & Manual Navigation Buttons - Using CSS, HTML & Javascript

How to Make A Portfolio Website using HTML CSS & JavaScript | Complete Responsive Portfolio

How To Create Your Own Javascript Image Slider Tutorial (Step By Step)

How To Make Image Slider Using HTML CSS JavaScript

How to code a carousel with HTML, CSS and JavaScript - from scratch (part 1)

Image Slider - With Auto-play & Manual Navigation Buttons - Using CSS, HTML & Javascript

HTML and CSS Project Tutorial: Pure CSS Image Slider

How to create an Image Slider in CSS and JavaScript

Responsive Image Slider | With Manual Button & Auto-play - HTML CSS Javascript

Create Responsive Image Slider in HTML CSS and JavaScript | Image Slider HTML CSS & JavaScript

Responsive Image Slider With Auto-sliding And Full Controls | HTML,CSS & Pure JavaScript

Create Crazy 3D Image Slider Effects Using CSS Only

Create A Draggable Card Slider in HTML CSS & JavaScript | Infinite Image Slider in JavaScript

How To Make Ecommerce Website Image Slider with HTML CSS Javascript -EASY TUTORIAL

Image Slider with Controls using HTML CSS & JavaScript

3D Image Carousel Slider with Javascript - Tutorial

How To Make an Infinite AutoPlay Image Slider Using JavaScript