Full Screen Image Slider With HTML, CSS & JS
ฝัง
- เผยแพร่เมื่อ 22 ต.ค. 2017
- 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 - www.codingdojo.com/l/yt/tr
CODE:
codepen.io/bradtraversy/pen/b...
BECOME A PATRON: Show support & get perks!
/ traversymedia
ONE TIME DONATIONS:
www.paypal.me/traversymedia
VISIT MY WEBISTE: Check Out My Udemy Courses
www.traversymedia.com
FOLLOW TRAVERSY MEDIA:
/ traversymedia
/ traversymedia
/ traversymedia
/ discord - วิทยาศาสตร์และเทคโนโลยี
Brad, your channel and videos are AWESOME. One thing that I would like to say, because you seem to be very concerned with it, is that (personally) I wouldn't care about your children/wife making noise in the background even if I WAS able to hear it. I'm so grateful that you take the time to put all of this knowledge into videos and then make them free for people like myself. Getting upset about something as trivial as background noise doesn't even register. A million thanks for all of your hard work, dedication, and altruism.
Yet another awesome quality piece of content. Thank you!! You're the man, Brad!
For what it's worth, I was wearing great headphones during your vid and I never heard any of the noises from your wife/kid :D
I was getting confused how to make slider but this one made everything very clear. Thanks Brad, appreciate your work a lot!
dude awesome video very rare on youtube that someone is helpful,no false info,and clear and concise.
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 :)
Great tutorial. Quick and on point with the vanilla JS. No need to apologize for the noise it wasn't even noticeable. Thanks again!
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!!
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!
Hope you had a brilliant time with your Family for the rest of Sunday, great videos btw!
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!
Another amazing tutorial. I'm loving your vanilla JS tutorials!
A big "THX" from France. I searched about a simple tuto like this.
You really are a great teacher :).
Thank you so much for taking the time to make this video, this was exactly what I was looking for, and your tutorial was really easy to follow.
Youre such a great developer. Thank you.
Thanks friend, I appreciate that :)
The video is from exactly 3 years ago (I don't believe in coincidences :)) but it has helped me exactly now. I could implement a slider using this tutorial as an example.
Thanks Brad, your videos always help me a lot.
I have no words to express my gratitude!!!!
The more I see his work more I like it. Thank you.
Thank you Brad, you've helped me progress video by video... i just get better. You such a great role model. Wish we had more people in the world like you. Once again thanks
Brad, I have watched so many of your tutorials in the last few months. I have learned so very VERY much thank you so much and I would not worry about background noise, we could not here it, and by the way we all have background noise in our lives you should not let that worry you, I know it does not bother us.
Hey Brad, love all your videos! Just wanted to make a quick suggestion on vertically centering the arrows. Instead of eyeballing how much to move the div back up with a negative margin, you can use
{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
So you're moving the div down 50% of the page, then moving it up by 50% of the arrow divs hight.
Thanks brad, I’m glad you help us beginners learn how to code better
do u need the server to be downloaded...i have the images in style.css n not in html...n my browser wont display the images?anyone can help me?
Thank you. All your videos I’ve watched so far are very helpful.
Something a little bit different but works the same:
arrowRight.onclick=nextSlide;
function nextSlide(){
reset();
if(current===images.length-1){
current=0;
images[current].style.display="block";
}else{
current++;
images[current].style.display="block";
}
};
// displays previous image
arrowLeft.onclick=prevSlide;
function prevSlide(){
reset();
if(current===0){
current=images.length-1;
images[current].style.display="block";
}else{
current--;
images[current].style.display="block";
}
};
Great turorials! Keep up the good work!
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.
as for me the best Vanilla JS slider tutorial so far
Thanks Brad for your tutorials. i've learned a lot with you...keep doing great tutorials
I'm implementing this in a mean stack app for a client. You're making me money. Thanks Brad!
Man like Brad, what a legend for making this video!
Such a great tutorial. Thanks Brad!
I attended Coding Dojo and your name came up!! I'm admire your work. Thank you for the videos!
I love this! Straight Html, CSS and Javascript development! Thank you for this! Your the Best.
You are an excellent teacher. Can't wait to try it on my own.
Thank you so much!! this is the class of tutorial i am searching for!
Awesome project , BRAD. I actually used more images for mine and it worked great. LOVE YOUR WORK
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!
Thank you for not using jquery again. you're the man Brad.
I try not to use jQuery anymore aside from when I need something pre-made and quick.
get us another movie!, what are you doing here Aladeen!
What to do to keep the pics from distorting when the browser resizes from large screens to phone size? Any suggestions would be appreciated! Thanks for the tutorial!!
You are my teacher, i have learned a lot from Traversy Media.
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
I have so much to learn, but thanks! Just the video I was looking for!
This is absolutely amazing. Thank you.
Hey Brad,
Thanks for this awesome tutorial.
Needed this one.. Thanks a lot man!
Thanks Brad. Clean and simple.
Thanks, Brad! Love your videos.
always clear and easy to learn
Thanks a lot bro. i have improved a lot in my coding thanks to you!
Excellent tutorial for beginners. Thank you for your time and efforts.
another simple but awesome tutorial! 😁
Thank you so much for the effort! Really great tutorial
awesome. best tutorial ever. i am learning so much from you. thank you.
You just straight up saved my ass with this video man. Thanks for the great content and for free!
That is a lot of coding for a simple web page, but result is awesome.
Great tutorial bro, keep up the good work.
Thank you
I was trying for a couple of days to use iteration for slide. But something was always missing. Thanks Brad. You are just amazing.
Love that video! Thank you very much!!!
Your videos are so helpful! Thanks!
exactly what I was needed....thanks!
How do you make it switch smoothly or with other animation?
More vanilla js tutorials please :)
If you search his playlists you'll find a lot of great vanilla :)
Hey! How do you add a transition with the arrows? Like how do you get the image to slide in after 2 seconds or something like that?
it really saved me some time thanks
Thank you! I liked that you used vanilla javascript.
Amazing video Brad!
Thanks for sharing your expertise🙏
thank you so much for your tutorial. I found your video so understandable and quite simple. :-)
Thank you Traversy!
Great job and super grip on web devlopment activities.
Excellent instructions thanks, what code do I need if I want my images to auto fade in on a loop
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?
thanks . It was such a wonderful tutorial and very useful
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!!
Thanks so much for the tutorial, just what I needed for the exam... Just had to nest the javascript in a function so I could pass in data from the wordpress API that I'm using to add new post.
Great tutorial, very useful. Thanks.
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 ?
I'm your fan from Russia! Very useful tutorials! I always put you like that)
Thx for your effort and great tutorial :)
to be honest，i feel happy and sad at the time；you are the best tutorial teacher on TH-cam 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
Thanks, I did learn a lot there :)
Amazing lesson,dude!
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
Interesting and usefull tutor as always, sir!
Arrow css was awesome. You have got one more subscriber as a gift.
Nice tutorial to learn...Works fine for me... Looking for more videos...
If Brad teach space science, u can even learn it easily. Number 1 teacher.
thank you man, you are a life saver
Thank you! i wonder if you can do a really short video about "slick.js" vs "owel carusel 2". all the videos on youtube are in arabic or some other languages . i have some problems with slick.js.
When listening to click in arrowRight, we set current to -1 because the slideRight function consequently increments to 0?
Nice tutorial, thanks mate :)
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?
i have a question, after i type cursor: pointer the background image disappears, any idea why?
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...
Hi! Excuse I do not understand the arrowRight, where you added + and (-) in the current. Can you explain those two parts.
Thank you very much. Great video!
Is there a video of doing this with the clickable arrows but that the images also transition on their own (slideshow type)?
I need both in one.
I'd love to see a MATLAB crash course if possible !!
i love you & your channel, thanks for everything !!!
I like the clean shave brad!
Thanks...Yeah the grey was getting out of hand lol.
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
amazing! really helpful!
Thanks lot Sir .....Supe Awesomer Tutorial