If i use this line of code // Remove current class current.classList.remove("current"); Then Why need this line of code setTimeout(() => { current.classList.remove("current"); }, 200)
@@shajalkumer938 I tried it with the settimeout and without on codepen and it didn't seem to make a big difference in the quick tests I did, but maybe I'm missing something.
i love videos with vanilla javascript projects and pure basic html css, no libraries no frameworks.There are so many softwares around that "GO TO THE BASIS" is a welcome procedure
I've been practicing js on my own a lot. Once we got to the js part, I paused the video and tried to code the functionality myself. I actually did it! I wasn't too far off the way you did it at all. Siked. Love the videos.
If Google is my study world, then your my best mentor sir... Just 2 weeks before I started learning HTML basics from your channel and now I have covered almost all the videos in the html&css playlist, also I do practice every day. I'm very much impressed with the way you teach practically, it helps me to hone my knowledge to the next level. A big thanks for all this stuff sir.
Guys instead of commenting first,second or third:We should implement what Brad teaches us and give him a proof that his videos are not only just to be liked ........We are learning a lot He will be proud to see our hands on his tutorials..Thanks BRAD.
This is a great idea! Coding along, and once we understand the concepts, modifying it and creating something unique is the best way to become a better web developer as quickly as possible! 👍👍👍👍👍
@@mr.webdev3700 Yeah that what I said until an unless we will not do hands on we will not able to grasp whats going behind the hood ,so we should hands on and one by one we should go to each css property and learn what happen when we apply on anything.
Thank you so much Brad! I was looking for a tutorial like this for a while now. I watch a lot of your JavaScript tutorials religiously. You're teaching method is the best I have seen.
Just 10 hours ago I posted on Stackoverflow a question about how I could get a content slider. From what I can see, one of the answers resembles the one you're applying so it's great to see it in action. I ended up using the answer that gave "hidden" to every block and uses an array to remove the hidden of the current slide because I considered it more intuitive
Great video to achieve something very slick in a straight forward and no mess way. So much better than having a plugin/framework cluttering your codebase up for something that can look very professional. Thanks so much!
Quick and Easy. You are a BadMF Traversy. I'm really enjoying learning Vanilla JS all over again through your Udemy course. I'm going to use this to showcase my "Beauties and Plumbers of the month" for my Men's Beer league hockey team. 😎🤘
Thanks for the slider Brad, the only thing I felt that may be lacking is accessibility considerations. How will screen readers deal with this type of slider? Would aria attributes of some sort be helpful?
For those who want to make it more dynamic, they can use nth-last-child(1) to select the last slide in style.css or they can directly set the background of the .slide div using the inline styling.
Enjoyed the tutorial. The only thing I didn't understand is why setTimeout(() => current.classList.remove("current")); is needed at the end ? Didn't we already remove the class beforehand ? Sorry I am a beginner....
Thanks man, great as usual. I would like to see more of these ,,components,, that we see on websites often. Its 1 thing to copy the code from somewhere, and another watching you how it is created. better understanding at least for me.
Love the great work and write up you have done, your videos have helped me a lot when it comes to learning things or even seeing a different way to do something I first came across your front end developer in 2018 video last year when I started to learn web and since then I’ve learned a lot from you. So thank you sir for the good work. Keep it up!
Thanks so much, Brad, you are really amazing. God bless you. Can't be a Patreon at the moment but I will in due time, cos you deserve that and much more. I am a beginner and don't know much js without looking at the already written code. But I think if anyone is using this in a complete project, the responsiveness for the slide content could get weird cos you will see text floating from beneath in real time lol. All that is needed to make it fully responsive is to let the width span 100% at smaller viewports. Example: @media (max-width: 700px) { .slide .content { width: 100%; } } Thank you
Great video! Right now there is a need for developers understanding accessibility. I think that definitely might be a great video if you can make that 😃
hi, Brad! thanks for the video! but i don't understand, why did you add (setTimeout(() => current.classList.remove('current'))) in the PREV and NEXT functions?
Great tut as usual, Brad. I've come up with a solution so you can use the same function to run the slides in either direction using a positive or negative number: /** * @param {number} direction Pass in 1 to run the next slide or -1 to run the previous one. */ const changeSlide = direction => { let current = document.querySelector('.current'), // index of current slide in the nodelist currentIndex = Object.values(slides).indexOf(current); current.classList.remove('current'); // a formula to make it so that reaching the end of the array brings you back to the start and vice versa let x = (direction >= 0) ? 0 : slides.length; slides[(direction + currentIndex + x) % slides.length].classList.add('current'); } prevButton.addEventListener('click', () => { changeSlide(-1); if(autoSlide) { clearInterval(slideInterval); slideInterval = setInterval(() => changeSlide(1), intervalTime) } }); nextButton.addEventListener('click', () => { changeSlide(1); if(autoSlide) { clearInterval(slideInterval); slideInterval = setInterval(() => changeSlide(1), intervalTime) } }); if(autoSlide) slideInterval = setInterval(() => changeSlide(1), intervalTime);
here is my solution to that. I tried to do it so that I could toggle my icon classes and the auto thing at the same time but i couldnt. this works though. I created a div and put it at the bottom so that I could have my controls there. I used vw for font size and stuff cuz i did not place my pics as background instead I control the size of things with vw. just do not pay attention to the vw if you get confused.
Thank you so much! I'm a complete newbie but I am building a website following your tutorials step by step. Your videos are of great help. Could you please tell me how should I do to add a counter to the slider (1/12, then 2/12, then 3/12...)? Thanks again for all your efforts explaining code in a way that everyone is able to understand.
Omg you replied!! 🤩 Let me take this opportunity to thank you for the kind of impact you have created in my learning and life in general as a web developer. I have been following you since last two years and genuinely look forward to your videos. Kindly make more courses on project based couraea on Udemy.
Thank you Brad for this amazing video. However, I need your assistance, the slide is not doing on mobile phones. I tried clearing up the cache, but still the same. Please, help me out. Thanks.
@@heatherlynn2695 Hi Heather - Based on your last comment to Brad it seems as though your issue is it not auto sliding. If that is true all you need to do is initialize the `auto` variable on line 4 as `true` instead of `false`. Here is a fork of Brad's codepen with that variable set to true. codepen.io/Senipah/pen/GewjvV hope that helps
Tl;Dr the challenges are usually never creating these small widgets, but rather fitting these widgets together in full sites for production, sometimes with a backend, sometimes static if it's cool read only stuff.
Thanks very much for video help a lot. I wonder why you use the setTimeout(current.classList.reomve('current')) again because already class been remove can you explain. thanks again
Hi Brad, five days ago I commented on codepen not working but in reality is Firefox the one that does not shows the images. Chrome display the website correctly!
I tried to incorporate your code in my project but the unique image displayed on the screen is the one allocated in the slide current class. Any clue how can I fix this problem?
Great video. Have you got any tutorials on WP plugins? I'm interested in making a WP plugin that makes email opt-in boxes that can be edited in WP dashboard to suit the look of the website.
i put 2 of these sliders on the same page but with both of them on even the first slider doesn't work anymore. Whats happening here?each slider only works when when set of JS is active
Great tutorial video as always. Is there a way to make the text slides into links? I tried a few standard methods, a tags etc, but couldn't get them to work.
I love this, it's great, (almost) perfect for my needs... but... is there a way to centre images vertically when I view them in full-screen? I mean, were possible, I'd like to see the full height of the image with left/right being trimmed to fit. I'm a bit of a noob, and haven't been able to do this. I'm guessing it's something ridiculously simple? Many thanks :)
Just change your css styles like this .slide:first-child { background: url(01.jpg) no-repeat center center; background-size: auto 100%; } .slide:nth-child(2) { background: url(02.jpg) no-repeat center center; background-size: auto 100%; } .slide:nth-child(3) { background: url(03.jpg) no-repeat center center; background-size: auto 100%; } .slide:nth-child(4) { background: url(04.jpg) no-repeat center center; background-size: auto 100%; } .slide:nth-child(5) { background: url(05.jpg) no-repeat center center; background-size: auto 100%; } .slide:nth-child(6) { background: url(06.jpg) no-repeat center center; background-size: auto 100%; }
Thanks for watching. One thing I want to mention is I forgot the second param to setTimeout() which I had as 200
You saved me!!
But why is it there? As far as I can tell it doesn't do anything because you've already removed the class of current.
I also do not understand why removing the class a second time would by necessary.
If i use this line of code
// Remove current class
current.classList.remove("current");
Then Why need this line of code
setTimeout(() => {
current.classList.remove("current");
}, 200)
@@shajalkumer938 I tried it with the settimeout and without on codepen and it didn't seem to make a big difference in the quick tests I did, but maybe I'm missing something.
My favorite type of ice cream: vanilla js
Now i know why you call him your dad ..!
now its kinda wierd having two youtubers commenting on each others channels
he commented on this before he was famous
i love videos with vanilla javascript projects and pure basic html css, no libraries no frameworks.There are so many softwares around that "GO TO THE BASIS" is a welcome procedure
I've been practicing js on my own a lot. Once we got to the js part, I paused the video and tried to code the functionality myself. I actually did it! I wasn't too far off the way you did it at all. Siked. Love the videos.
Congratulations!!!
I really love when mentor teach without any libraries.
Another awesome video.
Probably my favorite instructor. I keep returning to Traversey courses. Works great.
It's always fun to watch these short videos where you take a seemingly complicated concept and break it down very easily!
If Google is my study world, then your my best mentor sir...
Just 2 weeks before I started learning HTML basics from your channel and now I have covered almost all the videos in the html&css playlist, also I do practice every day. I'm very much impressed with the way you teach practically, it helps me to hone my knowledge to the next level. A big thanks for all this stuff sir.
This one was a little bit advanced for me with all the eventListener stuff but I still enjoyed it, thanks for sharing brad
Guys instead of commenting first,second or third:We should implement what Brad teaches us and give him a proof that his videos are not only just to be liked ........We are learning a lot He will be proud to see our hands on his tutorials..Thanks BRAD.
This is a great idea! Coding along, and once we understand the concepts, modifying it and creating something unique is the best way to become a better web developer as quickly as possible! 👍👍👍👍👍
@@mr.webdev3700 Yeah that what I said until an unless we will not do hands on we will not able to grasp whats going behind the hood ,so we should hands on and one by one we should go to each css property and learn what happen when we apply on anything.
Thank you so much Brad! I was looking for a tutorial like this for a while now. I watch a lot of your JavaScript tutorials religiously. You're teaching method is the best I have seen.
Dude, yesterday I was struggling wit making slider. Today it's your video. Bless you mate
same here.
I thorougly enjoyed both the content and the teaching style. This is exactly what I was looking for. Thanks.
*nice to see things being done in vanilla JS! nice and fast*
Just 10 hours ago I posted on Stackoverflow a question about how I could get a content slider.
From what I can see, one of the answers resembles the one you're applying so it's great to see it in action. I ended up using the answer that gave "hidden" to every block and uses an array to remove the hidden of the current slide because I considered it more intuitive
This is such a cool new take on the tired old carousel, I'm gonna implement this idea in my latest build! Great idea loved this video!
TOP ONE web development tutorial on RUclips
Perfect lession
The way you explain every single line of code !
Just don't stop with the comments.
Thanks alot
I just enjoy hearing his voice. Brad!
Simple yet structured nicely. Thanks for the video
Great video to achieve something very slick in a straight forward and no mess way. So much better than having a plugin/framework cluttering your codebase up for something that can look very professional. Thanks so much!
This is really the simple and new way to make sliders I was looking for in 2019. Thanks.
Great video as always, Brad! You rock man!!! 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
Quick and Easy. You are a BadMF Traversy. I'm really enjoying learning Vanilla JS all over again through your Udemy course. I'm going to use this to showcase my "Beauties and Plumbers of the month" for my Men's Beer league hockey team. 😎🤘
You make coding seem so much more easy and fun. Thank you!
thank you. You truly deserve all the good things that come into your life.
It's done and understood very well. Thank you, Brad.
Awesome, pretty straightforward, simple and clear.
You are the master of clean code
Lovely video Brad. Your hard work is amazing. A small request whenever you have time, a crash course on Ruby on Rails will be amazing.
Thank u Brad for the High Quality Code and Video, So helpful!
Another awesome video Brad, love the front end vanilla JS ideas, truly inspiring 👍
Awesome video have been looking for a way to write a script like this, you just made it sooo easy, thanks a lot brad
Dang you make that look easy. Thanks Brad.
Haha ikr!? 😀 I had to pause the vid a couple of times to really understand what he did
Thank you for the tutorial. I get giddy over DOM manipulation. 👍🏻
Wonderful teaching, great teacher. ♥
your tutorials are easy and very helpful i really like them, nice work and thank you for your work
Thanks for the slider Brad, the only thing I felt that may be lacking is accessibility considerations. How will screen readers deal with this type of slider? Would aria attributes of some sort be helpful?
This was helpful. thanks
I'm looking for a non jquery slider and this pops out in my notification haha thanks!
For those who want to make it more dynamic, they can use
nth-last-child(1)
to select the last slide in style.css
or they can directly set the background of the .slide div using the inline styling.
Really useful tutorial - thanks! Your videos are always really well paced and instructive, big thumbs up.
Enjoyed the tutorial. The only thing I didn't understand is why setTimeout(() => current.classList.remove("current")); is needed at the end ? Didn't we already remove the class beforehand ? Sorry I am a beginner....
Me too~
Thanks man, great as usual. I would like to see more of these ,,components,, that we see on websites often. Its 1 thing to copy the code from somewhere, and another watching you how it is created. better understanding at least for me.
Dang man these tutorials
are A+! Keep up the good work!
Love the great work and write up you have done, your videos have helped me a lot when it comes to learning things or even seeing a different way to do something I first came across your front end developer in 2018 video last year when I started to learn web and since then I’ve learned a lot from you. So thank you sir for the good work. Keep it up!
Thanks so much, Brad, you are really amazing. God bless you. Can't be a Patreon at the moment but I will in due time, cos you deserve that and much more. I am a beginner and don't know much js without looking at the already written code. But I think if anyone is using this in a complete project, the responsiveness for the slide content could get weird cos you will see text floating from beneath in real time lol. All that is needed to make it fully responsive is to let the width span 100% at smaller viewports. Example:
@media (max-width: 700px) {
.slide .content {
width: 100%;
}
}
Thank you
Thank you so much, Brad, for this really really useful guide. Thank you.
Great video!
Right now there is a need for developers understanding accessibility. I think that definitely might be a great video if you can make that 😃
Great Tutorial as always
God bless you from Jamaica.
very great tutorial. how about adding swiping function? :)
This^
github.com/destiny0114/FullScreenImageSlider
I enjoyed this thanks Brad. You are the best.
hi, Brad! thanks for the video!
but i don't understand, why did you add (setTimeout(() => current.classList.remove('current'))) in the PREV and NEXT functions?
Simple and Beautiful! Thank you Brad!
Thank you so much! Exactly what I was looking for
23:14 The line "setTimeout(() => current.classList.remove('current'));" at the end of the prevSlide() and nextSlide() functions isn't needed.
I was thinking the same thing watching the video. 👍
Great tutorial, but why the text (h1 and p elements) can be selected only on the last slide? Any ideas how to fix it?
Okay, solved myself - add the z-index property ^^
Brad, why did you get rid of the Bracket Pair Colorizer pluggin? that actually helps a lot to see the scopes of the parenthesis and curly brackets.
Thanks Brad , very useful tutorial
Amazing video bro, thank you so much for making such informative videos to clear our logic and fear about JS and CSS
Great tut as usual, Brad. I've come up with a solution so you can use the same function to run the slides in either direction using a positive or negative number:
/**
* @param {number} direction Pass in 1 to run the next slide or -1 to run the previous one.
*/
const changeSlide = direction => {
let current = document.querySelector('.current'),
// index of current slide in the nodelist
currentIndex = Object.values(slides).indexOf(current);
current.classList.remove('current');
// a formula to make it so that reaching the end of the array brings you back to the start and vice versa
let x = (direction >= 0) ? 0 : slides.length;
slides[(direction + currentIndex + x) % slides.length].classList.add('current');
}
prevButton.addEventListener('click', () => {
changeSlide(-1);
if(autoSlide) {
clearInterval(slideInterval);
slideInterval = setInterval(() => changeSlide(1), intervalTime)
}
});
nextButton.addEventListener('click', () => {
changeSlide(1);
if(autoSlide) {
clearInterval(slideInterval);
slideInterval = setInterval(() => changeSlide(1), intervalTime)
}
});
if(autoSlide) slideInterval = setInterval(() => changeSlide(1), intervalTime);
Loving these tutorials Brad! Would it make sense to have some controls that the user can select for autorun on the slides? How would we do that?
here is my solution to that. I tried to do it so that I could toggle my icon classes and the auto thing at the same time but i couldnt. this works though. I created a div and put it at the bottom so that I could have my controls there. I used vw for font size and stuff cuz i did not place my pics as background instead I control the size of things with vw. just do not pay attention to the vw if you get confused.
.slide-bottom-div{
display: flex;
justify-content: space-evenly;
align-items: center;
width: 100%;
height: 10%;
border: .1vw solid rgb(82, 128, 106);
background-color: white;
}
.slide-bottom-div i {
margin: 0 1vw;
font-size:2.5vw ;
color:rgb(82, 128, 106);
cursor: pointer;
}
.slide-bottom-div i:hover{
color:rgb(241, 100, 6);
transition: .5s;
transform: scale(1.05);
}
#play{
display: none;
}
const play= document.getElementById('play');
const pause = document.getElementById('pause');
pause.addEventListener('click', function () {
pause.style.display = 'none'
play.style.display = 'block'
clearInterval(slideIntervale);
});
play.addEventListener('click', function () {
pause.style.display = 'block'
play.style.display = 'none'
slideIntervale = setInterval(nextSlide, intervaleTime);
});
Magnifique and light!
Thank you so much! I'm a complete newbie but I am building a website following your tutorials step by step. Your videos are of great help. Could you please tell me how should I do to add a counter to the slider (1/12, then 2/12, then 3/12...)? Thanks again for all your efforts explaining code in a way that everyone is able to understand.
You’re the best Brad!!!
Thanks for recommending this cool theme for VSCode. Nice video as always. Keep it up :)
No problem, I actually really like the blue version but I think it may be too harsh for videos.
Omg you replied!! 🤩 Let me take this opportunity to thank you for the kind of impact you have created in my learning and life in general as a web developer. I have been following you since last two years and genuinely look forward to your videos. Kindly make more courses on project based couraea on Udemy.
Thank you Brad for this amazing video. However, I need your assistance, the slide is not doing on mobile phones. I tried clearing up the cache, but still the same. Please, help me out. Thanks.
What is the purpose of the setTimeout calls in nextSlide & prevSlide? Hasn't the class of current already been removed on lines 12 & 28 respectively?
Were you able to get this to work? If so, would you please share your edits to the file? I would be very grateful.
@@heatherlynn2695 Hi Heather - Based on your last comment to Brad it seems as though your issue is it not auto sliding. If that is true all you need to do is initialize the `auto` variable on line 4 as `true` instead of `false`. Here is a fork of Brad's codepen with that variable set to true. codepen.io/Senipah/pen/GewjvV hope that helps
@@MndlssBrndlsm Yes, I figured that out just a few minutes ago. Thank you very much for your follow up. You are a digital angel :)
Thank You Brad for such great content.
Could you please make a video on multiple products carousel?
Many thanks :)
Genial que dejes el código a la mano, me funciono increible, regresare para mostrarte como quedo con tu ayuda... saludos
Thank you Very much sir ,this is a very informative lesson ,l really enjoyed it...THANK YOU SIR
Very nice Brand thanks so much! Thumbed up!
Tl;Dr the challenges are usually never creating these small widgets, but rather fitting these widgets together in full sites for production, sometimes with a backend, sometimes static if it's cool read only stuff.
Amazing work!
Great tutorial. Thanks!
Very informative
Thanks really appreciate your video
Done... thanks for the tutorial :)
Thanks for the video.... I love all of your content.
If you click really fast on buttons it just goes to next slide without completing the previous animations any workaround for that?
Big big like for this tutorial.
I envy your knowledge Mr Brad.
Great video, I always watch your videos that gives to me new idea and learn new things.
Brad can you make a video for centerinrg things?
Thanks very much for video help a lot. I wonder why you use the setTimeout(current.classList.reomve('current')) again because already class been remove can you explain. thanks again
Hi Brad, five days ago I commented on codepen not working but in reality is Firefox the one that does not shows the images. Chrome display the website correctly!
I tried to incorporate your code in my project but the unique image displayed on the screen is the one allocated in the slide current class. Any clue how can I fix this problem?
Great video. Have you got any tutorials on WP plugins?
I'm interested in making a WP plugin that makes email opt-in boxes that can be edited in WP dashboard to suit the look of the website.
Pls Treva, what color theme are you using?
i put 2 of these sliders on the same page but with both of them on even the first slider doesn't work anymore. Whats happening here?each slider only works when when set of JS is active
Thanks for the great video mate
Brad sir yours all tutorial awesome, so I waiting your tutorial to learn something new.
I don't understand the function of the setTimeout function here. Can anyone explain?
Hello brad..please I'm a beginner but and I got your courses from a friend in html and css..pls how can you make it slide AUTOMATICALLY
When writing the addEventListener what does the e after 'click' mean?
Great tutorial video as always. Is there a way to make the text slides into links? I tried a few standard methods, a tags etc, but couldn't get them to work.
I love this, it's great, (almost) perfect for my needs... but... is there a way to centre images vertically when I view them in full-screen? I mean, were possible, I'd like to see the full height of the image with left/right being trimmed to fit.
I'm a bit of a noob, and haven't been able to do this. I'm guessing it's something ridiculously simple?
Many thanks :)
Just change your css styles like this
.slide:first-child {
background: url(01.jpg) no-repeat center center;
background-size: auto 100%;
}
.slide:nth-child(2) {
background: url(02.jpg) no-repeat center center;
background-size: auto 100%;
}
.slide:nth-child(3) {
background: url(03.jpg) no-repeat center center;
background-size: auto 100%;
}
.slide:nth-child(4) {
background: url(04.jpg) no-repeat center center;
background-size: auto 100%;
}
.slide:nth-child(5) {
background: url(05.jpg) no-repeat center center;
background-size: auto 100%;
}
.slide:nth-child(6) {
background: url(06.jpg) no-repeat center center;
background-size: auto 100%;
}
for natural size of image....
background-size: auto ;
I wanna add auto transition after a particular time. What should i edit in the code to add animation? Please Help. Its Urgent
thanks man it really helped
what if i add 8 images and dont add slide:nth-chiled(number) as there a way by which i can add the number automaticaly
thanks
love it already thanks