Full Screen Responsive Image Slider | No Libraries

In this video we will create a responsive image & content slider using just HTML, CSS transitions and a little bit of ES6 JavaScript.
Sponsor: DevMountain Bootcamp
goo.gl/6q0dEa
Code:
codepen.io/bra...
💖 Become a Patron: Show support & get perks!
/ traversymedia
Website & Udemy Courses
www.traversymed...
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia

[@TraversyMedia]

Thanks for watching. One thing I want to mention is I forgot the second param to setTimeout() which I had as 200

[@heatherlynn2695]

You saved me!!

[@MndlssBrndlsm]

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.

[@PsychoGod9898]

I also do not understand why removing the class a second time would by necessary.

[@shajalkumer938]

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)

[@ibbyel-serafy6890]

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

[@developedbyed]

My favorite type of ice cream: vanilla js

[@chikkiidehalvi5561]

Now i know why you call him your dad ..!

[@tastycakes856]

now its kinda wierd having two youtubers commenting on each others channels

[@markasgrazhulis9081]

he commented on this before he was famous

[@SomeGamerDudeGuy]

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

[@INKWEON7269]

Me too~

[@nonsolovita]

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

[@CODINGISEASY]

*nice to see things being done in vanilla JS! nice and fast*

[@Charlie_904]

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.

[@s0urp0wer5]

Congratulations!!!

[@luckywang95]

very great tutorial. how about adding swiping function? :)

[@MattPryze]

This^

[@sawjunhao6810]

github.com/destiny0114/FullScreenImageSlider

[@mr.webdev3700]

Great video as always, Brad! You rock man!!! 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

[@MDevpxl]

This one was a little bit advanced for me with all the eventListener stuff but I still enjoyed it, thanks for sharing brad

[@username_creates6991]

Does anyone else have a problem with implementing their own photos in this slider? How do I put my own photos in here?

[@batmanff1861]

Yeah someone help us out

[@HazzazHossain]

I don't understand the function of the setTimeout function here. Can anyone explain?

[@chevalier5691]

Simple yet structured nicely. Thanks for the video

[@StefanSchmalhaus]

23:14 The line "setTimeout(() => current.classList.remove('current'));" at the end of the prevSlide() and nextSlide() functions isn't needed.

[@marcod.643]

I was thinking the same thing watching the video. 👍

[@JayantBB78]

I really love when mentor teach without any libraries. Another awesome video.

[@rotimibest8530]

const isAGreatTeacher = name => name === 'Brad' ? true : false; console.log(isAGreatTeacher('Brad')); // true

[@TheRealJuggaloJoel]

Probably my favorite instructor. I keep returning to Traversey courses. Works great.

[@Famouzi]

Dude, yesterday I was struggling wit making slider. Today it's your video. Bless you mate

[@heatherlynn2695]

same here.

[@sunguru981]

Everything is ok .. but still i dont get why he added that setTimeout() in the previous and next methods

[@StefanSchmalhaus]

It's not needed at all. It doesn't do anything.

[@SomeGamerDudeGuy]

@@StefanSchmalhaus it is needed. i tried removing it and the slides stop working after 1 slide. Im learning and im not quite sure why that is needed aswell but it is neccessary...

[@jeromesnail]

I was wondering the same thing. Why would you remove the current class?

[@mysterbirdtrooper6516]

Some Gamer It doesn't make sense for them to be there. I went I deleted them and it was still working fine so I don't think they're necessary.

[@andriiauziak1178]

Hope it will appear some clever person who can explain this

[@ssengalanto7421]

I'm looking for a non jquery slider and this pops out in my notification haha thanks!

[@MndlssBrndlsm]

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?

[@heatherlynn2695]

Were you able to get this to work? If so, would you please share your edits to the file? I would be very grateful.

[@MndlssBrndlsm]

@@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

[@heatherlynn2695]

@@MndlssBrndlsm Yes, I figured that out just a few minutes ago. Thank you very much for your follow up. You are a digital angel :)

[@aleksPants]

Great tutorial, but why the text (h1 and p elements) can be selected only on the last slide? Any ideas how to fix it?

[@aleksPants]

Okay, solved myself - add the z-index property ^^

[@drewbird87]

Thank you for the tutorial. I get giddy over DOM manipulation. 👍🏻

[@reethikaravichandran7810]

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.

[@bane2256]

This was helpful. thanks

[@drhastings]

Thank you Very much sir ,this is a very informative lesson ,l really enjoyed it...THANK YOU SIR

[@toscaantosca4541]

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?

[@lawola5214]

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

[@mahfoudharous2397]

Thank u Brad for the High Quality Code and Video, So helpful!

[@stehwann]

Hello! Putting a link in the html file in Brads codepen directly into the div slide 1 for example ...labore doloremque vero! Brads Tutorial not works in the slider. What is the reason?

[@mohamedgomaa7793]

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

[@tyrrelldavis9919]

Not working, have tried to refactor into commonJS, still nothing. Edit: got it working. Plus other changes, now implemented in a more full website. Used materialize since they have easily accessible effects. Changed the styles and transitions completely Thinking about turning this into a "my favorite technologies" or "featured projects" section of a more full website , can work good for testimonials too. 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. In our current political climate I think it's good to actually have testimonials. That way people can't call you something you aren't. It's amazing how far off the rails dev Twitter can be sometimes with all their pandering and posturing. Now I know why devs I look up to don't use it. I've even gone as far as talking selfies with gf so people know I'm not a weirdo. Or can't use the I word and other blanket statements. As well as testimonials from woman programmers , especially people who i know, have had to ask them to please have my back in case this ideological secret police force on dev Twitter decides to do their typical targeting/ shame mobbing tactics. I know alot of other people who are worried about this too but are all to scared to say anything / it's easier to not say anything . since people are throwing the "i" and "nz" words around so loosely these days, Glad I got it working, I'm so dumb. Have always favored building on top of and building in my own style vs copying It's always these little errors that happen Did querySelectorAll() to #next and #prev Instead of just querySelector("#") Would document.getElementById also work in that situation?

[@abkupdates]

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.

[@MrSociopatu]

Can someone explain to me why we use ( "click" , e => nextslide(); ) at event button instead of just ( "click",nextslide ) ??

[@vibhutidesigner]

Thank you so much! Exactly what I was looking for

[@AndrewRMillar]

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?

[@freshpootube]

I'm trying to build this exact thing but with all the elements being populated by a database or JSON file. Anyone seen something like that?

[@GulfJobSeeker_Vacancies]

I want to learn how to create an image slider with unlimited images auto-fetching whatever is available in a folder.

[@s0urp0wer5]

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!

[@raashidkhan23]

If you click really fast on buttons it just goes to next slide without completing the previous animations any workaround for that?

[@crispinthomas2992]

I thorougly enjoyed both the content and the teaching style. This is exactly what I was looking for. Thanks.

[@mikesalinas5222]

Genial que dejes el código a la mano, me funciono increible, regresare para mostrarte como quedo con tu ayuda... saludos

[@thenoob9379]

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

[@radamesrodriguesneto4505]

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?

[@lanbinchen7375]

Hi there, this is awesome!! but Im trying to add to .content but it is not working...

[@theopenstack]

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

[@nurlyltube]

show a loading effect untill image is fully loaded, if u add this that would be great. Image lazy loading effect plz make a video in this topic

[@kunalmalik1745]

you didnt place arrow buttons as child of .slides. howcome does that work?

[@ilyas9303]

if you add buttons to each slide, they never work. except for the last slide. this is a big error. otherwise nice tutorial

[@tejaskapoor4595]

I wanna add auto transition after a particular time. What should i edit in the code to add animation? Please Help. Its Urgent

[@manuelramos5869]

It does not run in Firefox due to the privacy badger. Just shut off the thing!

[@TheNancyGroove]

Wonderful teaching, great teacher. ♥

[@zypher9690]

When writing the addEventListener what does the e after 'click' mean?

[@jesusidev]

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 😃

[@sumaya-kabir]

It's done and understood very well. Thank you, Brad.

[@MrAbbo11]

thank you. You truly deserve all the good things that come into your life.

[@oscarwang5860]

TOP ONE web development tutorial on KZbin

[@Dasi79]

Pls Treva, what color theme are you using?

[@randalfjohn9848]

I just enjoy hearing his voice. Brad!

[@nickpaul5080]

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?

[@heguer87]

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); });

[@anonymouseverx]

Thank you so much, Brad, for this really really useful guide. Thank you.

[@senju31]

God bless you from Jamaica.

[@lircha09]

It's always fun to watch these short videos where you take a seemingly complicated concept and break it down very easily!

[@Chitorra98duriduridr]

Can I use this slider with Laravel?

[@tyrrelldavis9919]

next.addEventListener not a function:(

[@ZziiD]

can you help me i need to add indicaters on the bottom and those indicators need to be clickable

[@coeniejvr]

how can you use this to allow swipe method on android and ipads? is it posible

[@maelstrom57]

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);

[@elliott9116]

For some reason I am just getting Uncaught TypeError: Cannot read property 'addEventListener' of null.

[@MohammedShazadBasha007]

even i am also getting the same error , have u resolved it?

[@leoidiaz]

Try moving the script tag referencing the JavaScript within your HTML to the end of the body. This worked for me.

[@skimran22]

Very informative Thanks really appreciate your video

[@sawthroat6623]

Good stuff. It is very easy to follow along and actually understand what is going on. However, I do have a slight issue with the transition of the content. For some reason the content doesn't slide in. It's as if the transition line in the css for the current content is completely ignored and the content is just there immediately. Anyone got any idea what might be the cause for this? I have checked in Firefox, Chrome, IE and Opera but they all ignore that particular line. Everything else works like a charm.

[@sawthroat6623]

Woops. Never mind. Figured it out already.

[@kingsleyatuba]

Please do a video on sliding background image. This one doesn’t work for background image

[@vikasghaghrani1193]

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.

[@mr.webdev3700]

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! 👍👍👍👍👍

[@vikasghaghrani1193]

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

[@haginsmedia]

Thank You Brad for such great content. Could you please make a video on multiple products carousel? Many thanks :)

[@MiguelGonzalez-eb9lj]

when i want to style the buttons they wont appear over my background what am i doing wrong????

[@zdarofMERGAITES]

Uncaught TypeError: Cannot read property 'classList' of null suddenly this happens on both next ant previous buttons?

[@CrookzArtwork]

Great Tutorial as always

[@kunalmalik1745]

why did you remove .current twice?

[@pvaitonis]

Can you share VSCode setup?

[@DoctorCode9]

your tutorials are easy and very helpful i really like them, nice work and thank you for your work

[@Dev3ATX]

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. 😎🤘

[@oli5256]

Couldn't you have something way more efficient with JavaScript instead of having all of that HTML?

[@germantalavera799]

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.

[@tyrrelldavis9919]

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.

[@manuelramos5869]

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!

[@MuhammadUsman-gb3jr]

Appreciate the video Sir :) but i I didn't quite get the purpose of setTimeOut() function at the end of both nextSlide() and prevSlide() functions, please explain me if anybody got it thanks

[@margaiwangara2863]

awesome video as always..can you please make a video on db schema for an ecommerce site. Always have a problem with models for products and product_attributes involving products that exist with colors in relation to sizes or vice versa

[@skrezwan12]

Done... thanks for the tutorial :)

[@housseinetassa3018]

thank you very much dude

[@hectorserrano9314]

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.

[@creativehub6579]

how to start in javascript

[@tudor7245]

Hi, Brad! I just realized that the slides from 1 to 5 don't let me select the text or click any link I write in them, but the slide 6 do. What could be the problem?

[@joel9909]

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

[@MuhammadAdnan-gx6rd]

RevolutionSlider without its libraries .... Challenge who can do this. .... ?

[@olgalukina7455]

Uncaught TypeError: Cannot read property 'classList' of null suddenly this happens on both next ant previous buttons? why?

[@burhanali9117]

can you paste your code here

[@olgalukina7455]

@@burhanali9117 I found a solution, i add window.onload = function() at the begining

[@belmiris1371]

Dang you make that look easy. Thanks Brad.

[@KletoReese]

Haha ikr!? 😀 I had to pause the vid a couple of times to really understand what he did

[@jekotediashvili8794]

hi brad, please make a video about Shopping Cart with vanilla javascript

[@MrTomski]

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

[@simonhousden8261]

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.

[@nurettinozturk3110]

Great! Thanks.

[@aLdiii9]

Thanks Brad