HomeНаука и техникаRelated VideosMore From: Traversy Media

Full Screen Image Slider With HTML, CSS & JS

3272 ratings | 167496 views
In this video we will be creating a full screen image slider with HTML, CSS and JavaScript. We will not be using any 3rd party libraries like jQuery. All Images are free stock images from pexels.com SPONSOR: Check out Coding Dojo - http://www.codingdojo.com/l/yt/tr CODE: https://codepen.io/bradtraversy/pen/boydaE BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia VISIT MY WEBISTE: Check Out My Udemy Courses http://www.traversymedia.com FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia https://discord.gg/traversymedia
Html code for embedding videos on your blog
Text Comments (300)
Man VS Hard (6 days ago)
A big "THX" from France. I searched about a simple tuto like this. You really are a great teacher :).
Tony Stark (14 days ago)
Please do a bootstrap navbar like responsive menu. Thank you.
Powerful Photography (21 days ago)
Excellent instructions thanks, what code do I need if I want my images to auto fade in on a loop
GTsurwa (23 days ago)
Could anyone please help me put a fade animation to this upon clicking the arrows for a smoother transition?
lachezar kanchev (1 month ago)
thanks . It was such a wonderful tutorial and very useful
Rocio Coccia (1 month ago)
the script can be use for a image gallery too?
kapkaal (2 months ago)
var num = 0; function next() { var slider = document.getElementById('slider'); num++; if(num >= images.length) { num = 0; } slider.src = images[num]; } function prev() { var slider = document.getElementById('slider'); num--; if(num < 0) { num = images.length-1; } slider.src = images[num]; }
paozi小笼包 (2 months ago)
can you add codes to make the slides be a carousell ? Thanks!
velie a (2 months ago)
i finished the video. i applied all the codes 1-to-1 but ALL THE IMAGES are still piled up and i think because of that when i click on the arrows, they dont display the next picture. can anyone help pls!!
Kwadwo Odame (2 months ago)
Please sir can I use atom editor to create the image slider
Code It (2 months ago)
You can use the transform property to position items by their center, like an img
Sandesh Sakhare (2 months ago)
can we add sliding effect
matthias screed (3 months ago)
hello brad thanks for the tutorial i use sass for a project i try to do the slide show but its seem not working when i put the link in the background-image do you know how can i fix the problem ?
NICE
ATOMIC_Propulsion (3 months ago)
👌
徐宏杰 (3 months ago)
for guys who ask for js tutorial video,i suggest you guys buy js books
徐宏杰 (3 months ago)
to be honest,i feel happy and sad at the time;you are the best tutorial teacher on YouTube i have ever seen,the content of your video and your explanation are so great!i feel bad because i know you cant record these videos frequently,core knowledge is not free. but you are the best teacher,best wishes
徐宏杰 (3 months ago)
how to creat an arrow with border? i cant figure out
von rivera (3 months ago)
can any one help me what if i want a image slider that is not full screen how can i do that?
Manny D (3 months ago)
I have found one problem when replicating this on my end. I moved the code to a js file named slider, and put it in a folder named js. I tried using 'let' but it wouldn't 'let' me heh, so i declared the variables using var = etc etc. Problem ? well its with the reset function. When you load the html page in the browser, ALL the slides are shown one on top of the other. Its as if, the reset() function only starts running when you fire the 'click' event associated with the arrow keys, therefore until this happens, the slider will load up showing ALL the slides one over the other. Its only when you begin to click the arrows, that the 'stacking' of the slides disappears. I think this has to do with the fact that as mentioned above, the reset function only hides all the slides AFTER the event listener detects the click. Not before. So I wonder if its my code or if anybody else had the same issue. Let me know what I might be doing wrong here. NOTE: 'let' didn't work, so i had to explicitly declare all my variables using var = etc etc heh
Alexander Malash (4 months ago)
Thanks Man!
ibrahim Mohamed (4 months ago)
Thanks, I did learn a lot there :)
Râistlìn Majere (4 months ago)
I'm implementing this in a mean stack app for a client. You're making me money. Thanks Brad!
Blair Owens (4 months ago)
Thanks a lot for this! I am putting together my first photography website for my friend and was struggling on creating a gallery. Your tutorial was easy to follow and straight-forward, leaving room for me to add me own styles :)
Abel Yoshuara (4 months ago)
template education, please tutorial?
Eryk Kryszewski (4 months ago)
TEXT MAKING BLUE: If anyone has a problem with text being selected while quick clicking on arrows - I found a solution. In my slider arrows are in the same row as text, so when i click 2 times - the next slider paragraph shows in the blue box (he is selected, cause we clicked 2 times on the website). We need to add "user-select: none;" to our .slide-content properties :)
Eryk Kryszewski (4 months ago)
any idea how to make it change a bit more smoothly? not to just display none - display block but to add any transition. i've tried in css and nothing
Art-Bloop! (5 months ago)
Great tutorial and really helpful! Unfortunately the arrow click function isn't working on mine, any ideas on how to fix this? Thanks! :)
Bondarenko_CJ (5 months ago)
Когда администратор постит мемфисы про Корбена
Vrikie (5 months ago)
I bet this isn't the last video by you that I'ma learn from
Go Mo (5 months ago)
Hey guys any idea, why I am getting this error "let is is not allowed as a lexically bout name". Cant continue further with following the sample, after 20:20.
Math Leo (5 months ago)
im getting error on js file : slider.js:40 Uncaught TypeError: arrowLeft.addEventListner is not a function what is the reason
Jack Wright (5 months ago)
querySelectorAll is the answer to all of my problems! Thanks. :)
Cai Shang-Hao (6 months ago)
thanks! Good tutorial
Gaje Robarge (6 months ago)
Im getting the error Cannot read property 'addEventListener' of null I can't figure out what I am doing wrong, the only thing I'm doing differently is using React.Js instead of doing it in an HTML document PLEASE HELP
Sebastián Danáč (6 months ago)
Hi man, I trying it doing in react.js too and i have the same issue, did you find a solution ?
Jolly Mongia (7 months ago)
The script is not working for me. And I am not able to understand why is it not working. I have exactly followed the tutorial. Please help me with a possible reason according to you. Following is the html code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Home page</title> </head> <body> <div class="wrap"> <div id="arrow-left" class="arrow"></div> <div id="slider"> <div class="slide slide1"> <div class="slide-content"> <span>Image One</span> </div> </div> <div class="slide slide2"> <div class="slide-content"> <span>Image Two</span> </div> </div> <div class="slide slide3"> <div class="slide-content"> <span>Image Three</span> </div> </div> </div> <div id="arrow-right" class="arrow"></div> <script> window.alert("applying script"); let sliderImages = document.querySelectorAll('.slide'), arrowLeft = document.querySelector('#arrow-left'), arrowRight = document.querySelector('#arrow-right'), current = 0; // clear all images function reset(){ for(let i=0; i < sliderImages.length; i++){ sliderImages[i] = style.display = 'none'; } } //Init slider function startSlide(){ reset(); sliderImages[0].style.display = 'block'; } //Show prev function slideLeft(){ reset(); sliderImages[current - 1].style.display = 'block'; current--; } //Show next function slideRight(){ reset(); sliderImages[current + 1].style.display = 'block'; current++; } //Left arrow click arrowLeft.addEventListener('click',function(){ if(current === 0){ current = sliderImages.length; } slideLeft(); }); //Right arrow click arrowRight.addEventListener('click',function(){ if(current === sliderImages.length - 1){ current = -1; } slideRight(); }); startSlide(); </script> </div> </body> </html>
Francisco Altolaguirre (7 months ago)
Thank you so much!! this is the class of tutorial i am searching for!
Eldin Edy (7 months ago)
great
Debabrata Roy (7 months ago)
Only thin I changed in CSS is: .slide { background-size: contain; .... and .slide1 { background-image: url("picture/01.jpg"); } ... etc. Problem is, none of the images are loading! Can anyone help? Thanks in advance.
Somnath Roy (7 months ago)
Sir can i control slide move when mouse is over then slider is stop moving ??
shani shani (7 months ago)
<script> let sliderImages= document.querySelectorAll('.slide'), arrowleft= document.queryselectorAll('#arrow-left'), arrowright= document.queryselectorAll('#arrow-right'), current=0; function reset () { for(let i = 0; i < sliderImages.length; i++) { sliderImages[i].style.display='none'; } } function startSlide() { reset(); sliderImages[0].style.display='block'; } function slideLeft() { reset(); sliderImages[current -1].style.display='block'; current--; } function slideRight() { reset(); sliderImages[current +1].style.display='block'; current++; } arrow-Left.addEventListener{'click',function() { if(current===0) { current = sliderImages.length; } slideLeft(); }}; arrow-Right.addEventListener{'click',function() { if(current === sliderImages.length -1) { current = -1 } slideRight(); }}; startSlide(); </script> that part of my cord dont run plz help me check the programe what problem ???
shani shani (7 months ago)
plz tell me about <script> and or other function
Bienvenu Badiat (7 months ago)
Great Tutorial Love it!! I would to know how to make it autoplay? THANKS
Samuel Njuguna (7 months ago)
Nice tutorial bro. <p action="POST"> CAN YOU SHOW ME HOW TO ADD THE ANIMATION CODE IN YOUR JS CODE PLEASE. </p>
Ethical Hacker (7 months ago)
my background image never work every time can anyone help me?
Samuel Njuguna (7 months ago)
i have the same issues mainly .jpeg format images are not working
Mårten Andreasson (7 months ago)
One of my arrows are beeing miss placed why is that?
Mårten Andreasson (7 months ago)
Thanks
Barik Buddy (7 months ago)
Nice explained! I have also nice looking slideshow tutorial.
Be Pelucio (7 months ago)
Hi Brad, thanks for another amazing video. I always follow your videos and I know you are developer and not psychologist, but have you ever felt that you won't be able to learn something? Thanks!
Paul Elksnis (7 months ago)
Really great video! I usually shy away from anything containing javascript but you explained it so very well it has rekindled my interest in taking another look at it! Thanks for taking the time to post!
Mustafa Erden (7 months ago)
If Brad teach space science, u can even learn it easily. Number 1 teacher.
Noobg (7 months ago)
It didn't work why i dunno
Milan Zaveri (8 months ago)
Can we make the image slide automatically every 3 seconds and also have arrow keys? Love your channel. Great content! 👍
Soha Parasnis (8 months ago)
How does the overflow-x property make sure that the arrow appears on all the images? (Before writing the JS code) Because without that line, the arrow only appears on one image
Soha Parasnis (8 months ago)
As in, how does making it 'hidden' ensure the arrow 'sticking' on all the images? I am not sure I get that. Anybody who knows , your help is appreciated :)
John Krain (8 months ago)
awesome. best tutorial ever. i am learning so much from you. thank you.
steve N (8 months ago)
Thanks Brad for your tutorials. i've learned a lot with you...keep doing great tutorials
Yonas Eyob (8 months ago)
Thanks
Di Lung Move it Ya Fool! (9 months ago)
I have so much to learn, but thanks! Just the video I was looking for!
Cristian SAM (9 months ago)
Thank you. Very Cool.
flamini mathieur (9 months ago)
perfect you search a great developer,but how can some join u for getting more skills on the stuff,i like coding .
Julie Hensgen (9 months ago)
exactly what I was needed....thanks!
Karloo (9 months ago)
this is fucking nuts, just for a image slide you need to write a freaking novel
Patrick Andor • (9 months ago)
Can you make the sliding one with jQuery(optional)? i really want to know how to make it
Øyvind Skjelstad (9 months ago)
Can you make it with the fade in animation as well?
Son Of Troy (9 months ago)
Thanks brad, I’m glad you help us beginners learn how to code better
Sohel Rana (9 months ago)
Hi,this tutorial is awesome. but how to change auto slide? please answer me
Liam Crane (9 months ago)
You have a new subscriber! great easy to understand video. Just learning javascript so the fact the slider was built using just this rather than jQuery is quality. Thanks a ton mate!
Hunter Zolomon (9 months ago)
On my code RIGHT arrow is not showing up....I checked​ ur codepen and u have the same issue...how come it worked in the vid and it didn't on the code pen???
Hunter Zolomon (9 months ago)
You are missing the closing </div> for class wrap
xct tcx (9 months ago)
Anybody else got this problem, where it keeps selecting the text? The blue box thingy? I thought there was something wrong on my side, as it doesn't affect every slide, but same thing happens with the link from the description.
Billy Coda (10 months ago)
Is there a reason that this doesn't work in CodePen?
SevroAuB (10 months ago)
it works for me but when i click left or right it adds white space where the next image is suppose to be then pushing that image below the white space code is exactly the same :(.
Tilottama Deb (10 months ago)
thank you so much for your tutorial. I found your video so understandable and quite simple. :-)
Luke Bennett (10 months ago)
Hi Brad, thanks so much for the video. It has really helped me out in my project. How would I go about adding a transition speed to the slider to slow it down? Is that possible with this technique?
Jessalyn Vasquez (10 months ago)
Is there a way I could put the words anywhere on the page and not in the middle?
That weirdo (10 months ago)
Can someone explain me why do we write slideRight() and slideLeft() function differently then call it in click event function when we can write directly into click event function.Thank you.
Olatera D (10 months ago)
Thank you, dude!! Everything works just perfect!!! Thousands of respects from js-noob like me! Im working at my first web-site and this video is the best tutorial Ive found!
ItzLachlan (10 months ago)
Can it be used smaller or does it have to be full screen?
Armin b (10 months ago)
17:00 "Let" tag is kind of confusing. Why not "var" in this case?
Thank you so much for the tutorial Brad.. one question- My image does not load directly from index.html file but when i loads it from the live server it works perfectly.. don't know how to resolve this problem. Can anyone help me?
Yb (10 months ago)
First of all, Thank you so much. Could I ask you something? Actually, I understand JS code all, so I want to check...If I did wrong to understand code, tell me, please..~ 1. The reason why use 'reset()', we made full-screen, so we can't put all img in brower, so every time we click, we have to use none and block, none and block.. continuously 2. arrowRight.addEventListener('click',function(){...} -> in this part why did 'current = -1'...? Because, function slideRight() { // reset(); sliderImages[current + 1].style.display = "block"; // If we use 'count=0', we can watch 'Image Two', because current= 0+1.. current++; } I understand all exactly.. right???
Sara taha (11 months ago)
I made js in script tag but didn't work for me so i tried in separate file but still it's not working ... why ?
Tom Miller (8 months ago)
Ah okay, mine was due to a silly mistake: I entered sliderImages(i) rather than sliderImages[i]. Did you end up using the code in a project?
Sara taha (8 months ago)
Tom Miller yeah.. i found that i made double folders with same content... so i deleted one of them
Tom Miller (8 months ago)
I'm having the same issue, did you figure it out in the end?
suresh kumar (11 months ago)
Nice tutorial to learn...Works fine for me... Looking for more videos...
Iskren Ivanov (11 months ago)
My Images disappear after I write the arrow class...
Radvil Ardian (11 months ago)
I like your eyes Brad
Daniel Simeonov (11 months ago)
Thats amazing! Quick question, is there any chance we can animate them?
Shelly Xiao (11 months ago)
Can someone please tell how does this code work in Dreamweaver??? I wrote the same thing with html field in DW but the JavaScript does work.
Alicja Starszak (11 months ago)
Really cool tutorial. Is it possible to do such a slider with full screen videos?
CHIA YIN MICHAEL (11 months ago)
how do i add more then one slider sorry i not very good in this can help
360 TV (11 months ago)
brad when i add the last startSlide(); to my script, my application wont run but when i take it out it works but when it first loads you can scroll through the images, but after you click one of the arrows you can't scroll anymore and then everything works as intended. i am kind of confused as to why that happens
Nabil Fannane (11 months ago)
We would love to see your kids bro !!
Bryan Phillips (11 months ago)
how to make it auto play?
cacz (11 months ago)
me suscribo, ojala sigas subiendo ejemplos de javascript saludos
Shell Casing (11 months ago)
How do I make it show the images automatically, say every 2 seconds, without having to click the arrows, but still retaining the arrow functionality? I'm thinking of using setInterval but not really sure how...
Flamlaseur (11 months ago)
Hello i have a problem : [background-image: url('slider_images/image1.jpg');] Why this line doesn't work for me (i'm on chrome) ?
Noah Cremers (11 months ago)
Had the same problem, I changed it to an URL instead of a location on my pc and it worked, I however have a new problem right now, the images are simply shown under eachother on the page, the slider doesn't work, idk what I did wrong but I'll keep looking :)
Vladan Glišović (11 months ago)
IE say...
JM Y (1 year ago)
you are not normal you must be genius ...I have a headache ha thx
AtileonVA (1 year ago)
You're great !! Thanks again . PS: However I didn't hear any noise on background :P
Walter Grigoryan (1 year ago)
i have a question, after i type cursor: pointer the background image disappears, any idea why?
Jenna_Creates (1 year ago)
Another amazing tutorial. I'm loving your vanilla JS tutorials!

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.