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

Full Screen Image Slider With HTML, CSS & JS

3731 ratings | 191703 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 (296)
Ricardo Guadalupe (1 day ago)
How do I make it so that it's only a section of the webpage and not the whole entire background?
Jose Martinez (21 days ago)
estupido anuncio de WIX
Sabbir Ahmed (1 month ago)
Arrow css was awesome. You have got one more subscriber as a gift.
Nick Paul (1 month ago)
Brad, I am learning so much from your youtube tutorials. I'm 69 years old and looking to become a better web developer so I can retire from my FTJ and work from home. Your work is awesome, and I think it's great that your wife and kids are supporting you as you support us.
Raja Maneshkumar (1 month ago)
.arrow{ cursor: pointer; position:absolute; top:50%; margin-top:-50px; width: 0; height: 0; borde-style:solid; } #arrow-left{ border-width: 30px 40px 30px 0; border-color:transparent #fff transparent transparent; left: 0; margin-left: 30px; } i have problem i have try to much but here arow is not displaying
Martin B (1 month ago)
Can some expert help me please ? We need add here a timing to changing pictures and add some effect to looks better changeing pictures ? or if we can change picture by slide on the picture to right or left ? thank you very much , waiting for help . [email protected] thanks a lot :)
Gods Autobiography (2 months ago)
Many thanks for making this tutorial! Just so you know, I couldn't hear any noise that they were making. Your mic does well to not pick up those far-away sounds it seems haha. Happy to subscribe to this channel and I look forward to learning more from you!!
Mohamed Farih (2 months ago)
Did you ever think about creating a video to do this in React? Would be great, I would like to watch it
ziskiend (2 months ago)
If you want this to slide aromatically you can add this to the code (this if for sliding every 3 seconds, change the 3000 value to get more or less time): Find where it says Init Slider and update that section with this: // Init slider function startSlide() { reset(); sliderImages[0].style.display = "block"; setInterval(() => { if (current === sliderImages.length - 1) { current = -1; } slideRight(); }, 3000); }
Seulyi LEE (2 months ago)
Thank you so much. I just started to learn about front-end development. And i was almost crying while copying a site for the portfolio. You helped me out! You are my hero!! Thank you again!!
adagsadas GK (3 months ago)
Thank you.
Eron Harden (3 months ago)
I added transition by => 1- Putting the images on top of each other using position. 2- Using Opacity instead of the Display property.
Eron Harden (3 months ago)
How do I add transition to this?
JW P (3 months ago)
Brad drives a lot of Pexels traffic.
Elbasiri Youness (4 months ago)
Firstly, from now to ever I'll call you Teacher, you deserve it trillions times teacher. secondly to give and share knowledge with no reward thats absolutely a key of hapiness! may god protect, bless your steps you and you children and wife ameen! wish you happy too
Man VS Hard (4 months ago)
A big "THX" from France. I searched about a simple tuto like this. You really are a great teacher :).
Tony Stark (4 months ago)
Please do a bootstrap navbar like responsive menu. Thank you.
Powerful Photography (4 months ago)
Excellent instructions thanks, what code do I need if I want my images to auto fade in on a loop
GTsurwa (4 months ago)
Could anyone please help me put a fade animation to this upon clicking the arrows for a smoother transition?
lachezar kanchev (5 months ago)
thanks . It was such a wonderful tutorial and very useful
Ro .Coccia (5 months ago)
the script can be use for a image gallery too?
kapkaal (6 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小笼包 (6 months ago)
can you add codes to make the slides be a carousell ? Thanks!
velie a (6 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 (6 months ago)
Please sir can I use atom editor to create the image slider
Carter04 (6 months ago)
You can use the transform property to position items by their center, like an img
Sandesh Sakhare (6 months ago)
can we add sliding effect
matthias screed (7 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 (7 months ago)
👌
徐宏杰 (7 months ago)
for guys who ask for js tutorial video,i suggest you guys buy js books
徐宏杰 (7 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
徐宏杰 (7 months ago)
how to creat an arrow with border? i cant figure out
von rivera (7 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 (8 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 (8 months ago)
Thanks Man!
ibrahim Mohamed (8 months ago)
Thanks, I did learn a lot there :)
Râistlìn Majere (8 months ago)
I'm implementing this in a mean stack app for a client. You're making me money. Thanks Brad!
Blair Owens (8 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 (8 months ago)
template education, please tutorial?
Eryk Kryszewski (8 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 (8 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! (9 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 (9 months ago)
Когда администратор постит мемфисы про Корбена
Vrikie (9 months ago)
I bet this isn't the last video by you that I'ma learn from
Go Mo (9 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 (9 months ago)
im getting error on js file : slider.js:40 Uncaught TypeError: arrowLeft.addEventListner is not a function what is the reason
Dominika Recław (1 month ago)
same " Uncaught TypeError: Cannot read property 'addEventListener' " ;-; help
Jack Wright (9 months ago)
querySelectorAll is the answer to all of my problems! Thanks. :)
Cai Shang-Hao (10 months ago)
thanks! Good tutorial
Jolly Mongia (11 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 (11 months ago)
Thank you so much!! this is the class of tutorial i am searching for!
Eldin Edy (11 months ago)
great
Debabrata Roy (11 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 (11 months ago)
Sir can i control slide move when mouse is over then slider is stop moving ??
shani shani (11 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 (11 months ago)
plz tell me about <script> and or other function
Bienvenu Badiat (11 months ago)
Great Tutorial Love it!! I would to know how to make it autoplay? THANKS
Samuel Njuguna (11 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 (11 months ago)
my background image never work every time can anyone help me?
Samuel Njuguna (11 months ago)
i have the same issues mainly .jpeg format images are not working
Mårten Andreasson (11 months ago)
One of my arrows are beeing miss placed why is that?
Mårten Andreasson (11 months ago)
Thanks
Be Pelucio (11 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 (11 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 (1 year ago)
If Brad teach space science, u can even learn it easily. Number 1 teacher.
Noobg (1 year ago)
It didn't work why i dunno
Milan Zaveri (1 year ago)
Can we make the image slide automatically every 3 seconds and also have arrow keys? Love your channel. Great content! 👍
Soha Parasnis (1 year 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 (1 year 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 (1 year ago)
awesome. best tutorial ever. i am learning so much from you. thank you.
steve N (1 year ago)
Thanks Brad for your tutorials. i've learned a lot with you...keep doing great tutorials
Yonas Eyob (1 year ago)
Thanks
I have so much to learn, but thanks! Just the video I was looking for!
Cristian SAM (1 year ago)
Thank you. Very Cool.
flamini mathieur (1 year 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 (1 year ago)
exactly what I was needed....thanks!
Karloo (1 year ago)
this is fucking nuts, just for a image slide you need to write a freaking novel
Patrick Andor • (1 year ago)
Can you make the sliding one with jQuery(optional)? i really want to know how to make it
Øyvind Skjelstad (1 year ago)
Can you make it with the fade in animation as well?
Son Of Troy (1 year ago)
Thanks brad, I’m glad you help us beginners learn how to code better
Sohel Rana (1 year ago)
Hi,this tutorial is awesome. but how to change auto slide? please answer me
Liam Crane (1 year 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 (1 year 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 (1 year ago)
You are missing the closing </div> for class wrap
xct tcx (1 year 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 (1 year ago)
Is there a reason that this doesn't work in CodePen?
SevroAuB (1 year 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 (1 year ago)
thank you so much for your tutorial. I found your video so understandable and quite simple. :-)
Luke Bennett (1 year 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 (1 year ago)
Is there a way I could put the words anywhere on the page and not in the middle?
That weirdo (1 year 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 (1 year 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 (1 year ago)
Can it be used smaller or does it have to be full screen?
Armin b (1 year 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?
jay j (1 year 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 (1 year 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 (1 year 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 (1 year ago)
Tom Miller yeah.. i found that i made double folders with same content... so i deleted one of them
Tom Miller (1 year ago)
I'm having the same issue, did you figure it out in the end?
suresh kumar (1 year ago)
Nice tutorial to learn...Works fine for me... Looking for more videos...
Iskren Ivanov (1 year ago)
My Images disappear after I write the arrow class...
Radvil Ardian (1 year ago)
I like your eyes Brad
Daniel Simeonov (1 year ago)
Thats amazing! Quick question, is there any chance we can animate them?
Shelly Xiao (1 year 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.

Would you like to comment?

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