How to code a carousel with HTML, CSS and JavaScript

No video

How to code a carousel with HTML, CSS and JavaScript - from scratch (part 2)

Рет қаралды 131,470

Күн бұрын

In this video I take a look at setting up a carousel, sometimes called a slider, for a website. With the markup and the CSS already done, it's time to tackle the Javascript!
Zell's course: learnjavascript.today
Zell's course changed how I approach JS and made me much more comfortable with it, and with it only open for a limited time I was glad to put this out to give you an idea of just a small fraction of the content you can learn from his course. I know it's expensive, and it's not for everyone, but it's really high quality and contains a TON of content.
////// Timestamps
4:32 - declaring the variables
13:03 - arranging the slides
20:00 - right button functionality
30:34 - moving the functionality to a function
34:36 - using the function for the left button
35:56 - adding the functionality to the dot navigation
46:54 - updating the dots to match the slide
50:50 - adding / removing the arrows
---
I have a newsletter! www.kevinpowel...
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowel...
---
My Code Editor: VS Code - code.visualstu...
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZfaq channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kev...
Github: github.com/kev...

Пікірлер: 405

@derekherincx1603 3 жыл бұрын

I was intimidated when I saw a one hour long video and honestly, I can say that this is hands down the BEST tutorial I've seen on here. Definitely motivated me to refine my CSS skills! You got a new subscriber. Keep the content coming!

@leenardlacay3422 3 жыл бұрын

Similar sentiments

@bitetheapple8 Жыл бұрын

Thank you for making these 2 videos!! The way you've broken down the project into smaller tasks & how you describe the whole process makes it quite easy to follow

@emmanueleze3028 5 жыл бұрын

This is by far the best explained carousel Vanilla JS tutorial on KZfaq. I love the fact that you allowed yourself make mistakes and also helped us figure out the solutions in camera. You have a true gift of teaching and you have inspired my Javascript journey. God bless you Mr. Kevin Powell. Big LOVE from Lagos, Nigeria!

@KevinPowell 5 жыл бұрын

Very glad to hear that you liked the video, as well as my approach!

@bikramchettri9405 5 жыл бұрын

@@KevinPowell Can you do something like this? kzfaq.info/get/bejne/Z854idmmuM7Xd6M.html

@MsAnnieHuang 3 жыл бұрын

It's July 2021 and I still coded along the whole tutorial. It is a very solid vanilla carousel. Great work, Kevin.

@korragnarok1536 2 жыл бұрын

you were born to teach. i cannot explain just how helpful your videos have been to me!

@ElementoryMyDearWatson 2 ай бұрын

I agree and concur 100%

@dtdionne 3 ай бұрын

While a few years old still thank you for making these videos. Ur humility and authenticity (promote others hard work that helped you and not constantly requesting likes and subs) earned my subscription. Well done and thanks again.

@leightonbuchanan-cates3932 8 ай бұрын

The most helpful video on photo slides I have ever come across. I love how clearly you explain your steps as well as why you choose certain steps over others. Engaging as hell and your voice is nice to listen to!

@antoniabradford9339 5 жыл бұрын

This is fabulous. Thank you so very much. The fact that you made a handful of errors, is absolutely wonderful. I wanted to add a carousel to our website, but I had no idea how to do it. Now I am 99% of the way there. Thanks again, and keep up the good work.

@nohael-deeb5830 5 жыл бұрын

i feel comfortable with the way you explain everysingle step you make how you make it why you make it .. you're a proffessional you make it simple yet prof :)

@fernandoboschiero1178 Жыл бұрын

Dude... these are the kinds of details that really help us learn. Thank you so much for this video.

@bongajewelmsimang5337 8 ай бұрын

wow not gonna lie I had to come back to this video a few times to get it right and finally its complete working accurately and have learnt so much in these two videos

@gaelfeilemen12345678 3 жыл бұрын

This is one of the best tutorials on CSS and HTML I've seen so far!

@miloskostic2239 5 жыл бұрын

Once again great lesson! I watched many tutorials on this subject and this is the only one that is easy to follow and well explained.

@lnlupo95 2 жыл бұрын

Thank you very much Kevin. I needed to make a carrousel for my job, and you've just saved me. Also, this video helped me a lot to understand better how JS works. I've just subscribed to your channel, thanks for your good content!

@Digital963 3 жыл бұрын

your videos may not typically include JS but i gotta say, I def learned some cool JS stuff in this video that I had no idea you could even do! For example, "e.getBoundingClientRect" IF FREAKING AWESOME & I KNEW NOTHING OF IT !!! This ch is quickly becoming one of my fav go tos for quick tips & even quick fixes for my production level projects. Thanks man, I wholeheartedly appreciate the time & effort put into these videos. You're truly providing a great service. I hope I could one day positively affect so many people/life-time students a fraction of what you have. Thanks again! 😁

@kaieverdeen9428 4 жыл бұрын

Learned a bunch of new JS stuff! Thank you for this! I was looking for videos on how to do carousel and stumbled on this. And I have to say, this is a godsend. Now I can put the finishing touches on my website project.

@jaypatel1393 Жыл бұрын

Definetly one of the BEST tutorials i 've seen - well explained - thanks

@glorp_productions 5 жыл бұрын

*I've found another shorter way to hide arrows when it is end/start of slides. Here it is:* const checkNav = (targetSlide) => { targetSlide.nextElementSibling ? nextBtn.classList.remove('hidden') : nextBtn.classList.add('hidden'); targetSlide.previousElementSibling ? prevBtn.classList.remove('hidden') : prevBtn.classList.add('hidden'); } I've created this function and added it do all three event listeners, and there is just one parameter. Anyways, thaks for the vid, it was informative and interesting. Keep it up!

@coolwhip2291 4 жыл бұрын

onload prevBtn still showing to me.

@coolwhip2291 4 жыл бұрын

fixed with: window.addEventListener("load", () => { prevBtn.classList.add('hidden'); });

@doneilchapman1542 10 ай бұрын

Thank you, I successfully followed along and built out the entire carousel. I tweaked it to what I wanted and it was a good experience. I learnt alot.

@rohitprabhu5321 3 жыл бұрын

I am a rookie/kiddie who was looking throughout the internet for a good mentor who can help me with the front-end. Seems like I found one finally! The most important thing that I learned from this video is to utilize console.log() in js for the testing purpose if everything is going right, or to find out any errors. I guess its really basic? But for a new learner like me, its a great start :) Thank you for such a great tutorial !!!...

@Anuta2310 Жыл бұрын

Thank you a lot for this tutorial. Your explanations are super-clear. I followed your instructions and managed to build my own carousel. You are a great teacher!

@lookupverazhou8599 2 жыл бұрын

I built this out completely on my own using your HTML and CSS structure first before I watched your video. Boy, is your way more streamlined and clean than mine, and I definitely didn't complete it in under an hour lol. But I also added the functionality of being able to grab and drag the pics to move them, and messed around with the element to add some extra to it, so while the pics were in transition, or being dragged, the background would transition between two colors based on the mode RGB of each slide. That's really the best way to properly learn anything, though, doing it yourself, *especially* when you have someone else providing a solution in the end. As always, thanks for the video. Always informative!

@smohammadhn 2 жыл бұрын

used it in a vue/nuxt application with some modifications and it worked like a charm, perfect explanation

@xl8134 2 жыл бұрын

Kevin, you are such a good teacher! You've explain everything well.

@42savage 5 жыл бұрын

Thanks mate, I learned something new, like array index, sibling and event listener trick

@t-h787 4 жыл бұрын

I honestly do not understand how people can dislike videos like this. Epic video, thank you so much!!!... liked & subbed & subbed to the JS course!!

@KevinPowell 4 жыл бұрын

Thanks for the sub! And it's not a YT video if it doesn't have a dislike!

@emmanuelrojasmusica 2 жыл бұрын

This videos make you easly fall in love whith coding, Thaxs!

@alfonsosimelio4388 4 жыл бұрын

This is a great tutorial, thank you so much for sharing! My first real JS exercise but I was able to follow along. I put the lines from the hideShowArrows function as part of the moveToSlide function in order to save typing :D

@_alish_ 2 жыл бұрын

You are the best teacher I have even came across!

@charlesxavier77 5 жыл бұрын

I did not appreciate this tutorial enough when I first made it. But now that I am trying to remake it and I have a better understanding of javascript. This tutorial is soo gooood! Maybe you can make a carousel that moves with a set time and maybe 1 that has smaller img, like you need on modern site now days

@themorgue3038 4 жыл бұрын

This was my first attempt at JS. Thank you so much for the detailed video. A lot of pause and rewind, but I got it to work. Subbed and Liked!

@tinotaylor 4 жыл бұрын

Love the fact that you push people to go past your tutorials and build things. :)

@KevinPowell 4 жыл бұрын

It's so important! I don't think I can ever say it enough.

@davidfranklin63 Жыл бұрын

Fantastic videos - thank you. Didn't realise just how powerful JS is. Classes, Next/Previous siblings and Loops - superb explanations!

@Noelciaaa Жыл бұрын

Thank you so much for this! Now I will try to figure out how to make these loop and then, auto-slide

@robincannon2569 4 жыл бұрын

This is Frikkin' Brilliant. Really helped me make my JavaScript knowledge more concrete. Thank you!

@rohitnayyar5649 Жыл бұрын

I love your approach when it comes to explaining things. It really helps with logic building. Thanks Kevin. If possible please make more vedios on js.

@chelsealeonhardt1667 Жыл бұрын

Thank you so much for this tutorial! Even though it was long, this was very digestable and fun to follow along! Would love to see more javascript videos too!

@scriptsandtags 2 жыл бұрын

Thank you so much. I learnt so many new things from this video, it is amazing how much Javascript can do

@marcell93 5 жыл бұрын

Thank you soooo much for this video!! Been searching for days for a good tutorial and yours is the best one:) Keep up with the good work!

5 жыл бұрын

I'm working in a project that uses slides-like pages and I used mostly CSS to adjust position and sliding transitions. I think it's better semantically. Anyway, your project is amazing as usual. Every new video at least a little knowlege++.

@MrKoniInTech 2 жыл бұрын

man you're the CRATOS of javaScript "God of JavaScript" respect!

@HossamKhalaf-sr1oo 5 жыл бұрын

Just finish it..thanks for your great effort, i hope you make more javaScript tutorials, your way of handling errors is really very valuable for us, makes us understand, not just copy the code from other screen, you are such a great teacher!!

@johndecosta8266 5 жыл бұрын

You’re a legend Kevin. I coded along with you (much use of pause button) by the end my brain was frazzled. Great work. Keep it up

@cristiankaz2264 11 ай бұрын

Absolutely amazing !!! you are a saviour. You explain stuff very well, congrats

@leonardocastro7050 3 жыл бұрын

this is how every tutorial should be, amazing tutorial, thanks a lot for that amazing explanation!

@VictorSalaberry 2 жыл бұрын

Thank you! This tutorial was awesome. I´m new to javascript and this was really helpful to start learning and reinforce the knowledge.

@freshpootube Жыл бұрын

This is exactly what I'm looking for. I've built my first PHP/SQL gallery site. Hoping to get it up this week.

@patriciacostalonga5282 4 жыл бұрын

Thank you so much for this amazing tutorial and for putting all the effort in explaining every detail. I'm very happy that I could achieve the final result and understand all the steps :D

@electricimpulsetoprogramming 2 жыл бұрын

como voce aprendeu programação?

@shvideo1 5 жыл бұрын

What a great video. I followed both videos all the way and built this awesome widget. You are a great teacher. Thank you for sharing your knowledge.

@iamdanielkip 5 жыл бұрын

Kevin, I must say I learn a LOT through your channel and the way you present content, organize it and share it with us is really amazing. One specific doubt I would like you to tackle if possible is JavaScript vs. Css Animations. I heard people saying one is better over the other, lighter and more appropriate in some cases. The other thing I would ask is if at some point you could enter the WordPress world as well, since dynamic sites are often required by customers and most themes are super bloated. Thank you so much for sharing your knowledge with us and the constant good humor. Many thanks from Brazil!

@KevinPowell 5 жыл бұрын

Glad you like my content Daniel! As for animation through JS or CSS, it really depends on what you need to be animating. In this case, I'm using JS, but the animations are CSS animations. The key to good CSS animations is sticking with opacity, scale, rotate, and translates. A lot more info on that here: medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108 I haven't touched WP (in a big way, I do minor stuff with it for clients) in a long time, so we'll see on that one. My php is pretty terrible.

@iamdanielkip 5 жыл бұрын

@@KevinPowell I'll check the article. Thank you for taking your time to answer me! :) Oh, another quick request. Any plans on making a video about masonry galleries? =D

@OtsileM 4 ай бұрын

You're a superstar! Now to put this on a timer.

@OtsileM 4 ай бұрын

setInterval(function() { const currentSlide = track.querySelector('.current-slide') const nextSlide = currentSlide.nextElementSibling; const currentDot = dotsNav.querySelector('.current-slide'); const nextDot = currentDot.nextElementSibling; const nextIndex = slides.findIndex(slide => slide === nextSlide); if ((slides.findIndex(slide => slide === currentSlide)) === (slides.length -1)) { slides.forEach(setSlidePosition); slides.forEach(slide => slide.classList.remove('current-slide')); dots.forEach(dot => dot.classList.remove('current-slide')); slides[0].classList.add('current-slide'); dots[0].classList.add('current-slide') const currentSlide = track.querySelector('.current-slide') const nextSlide = currentSlide.nextElementSibling; track.style.transform = 'translate(-' + currentSlide.style.left + ')';} else{ moveToSlide(track, currentSlide, nextSlide) updateDots(currentDot, nextDot); hideButtonsAtEdges(slides, prevButton, nextButton, nextIndex); } console.log("This message will appear every 3 seconds."); }, 5000); // 5000 milliseconds = 5 seconds

@regimelesmoras7805 2 жыл бұрын

designing a website is so hard for me and I'm new to javascript and the css stuff. but if you know the function and method.. I know that I can read the codes fast and easy .. and know watching your video is so good and understandable.. the way you emphasize the variables and its purpose is so clear. at first i thought it was boring coz its a 1hr video... thumbs up to this and I subsribe also. :)

@skywalker8216 6 ай бұрын

Bro I genuinely love you

@kiroshi7364 2 жыл бұрын

wow this was an awesome guide! it was so complicated and i dont really understand most of it haha. looks like im going to watch this video over and over until i can make a carousel in my sleep

@anastasiiam9930 4 жыл бұрын

THE ONLY CLEAR EXPLANATION THANK U SOOO MUCH!!!

@asr84 2 жыл бұрын

This is great, it's just awesome to also learn JS with you!

@sivasirigiri6616 4 жыл бұрын

Sir, I really like your way of Teaching, I really feel you like my godfather in code, And I learn a lot from you whenever you make a video on code, And please make more videos on javascript, Thanks Siva

@arek6296 2 жыл бұрын

O man, you should make definitely more java script materials. Your usage of functions I have never bumped into broadened my horizons,

@zsoltnemesnyik3445 4 жыл бұрын

Cool tutorial, I've never built a carousel from 'scratch' before (used Bootstrap for this). Recently I've been tried to deepen my knowledge in JS, so I absolutely learned from it. Btw, I think you can remove 'track' from moveToSlide and 'slides, prevButton, nextButton' from hideShowArrows, they were declared and defined at the top of JS file, so they can be accessed inside your functions, instead of passing them amongst the arguments.

@yankatanti2132 17 күн бұрын

thank you so much for these videos , i've really learned a lot of thing

@bruceclothier3082 2 жыл бұрын

Thanks Kevin, you're a legend.

@christopherschwalbe2072 7 ай бұрын

Thank you for the amazing tutorial! Could you add a third part on making it and infinite scroll instead of hiding the buttons? Love your content. Thank you again!

@luandesouza450 3 жыл бұрын

Thanks for your video Kevin, It helps me a lot and also I learned how to use the selectors to handle the DOM. I love your content!

@work9167 2 жыл бұрын

Thank you, Kevin. This video has helped me a lot to understand such complicated topic.

@talkohavy 4 жыл бұрын

First of all, great video! Kudos! Second, Could you please make a part 3? In which you would extend this singleSlide carousel into a multiSlide carousel? Say like... 5 slides at a time? You know, like websites do on a ProductPage where they show you "Recommended Items" at the bottom. Please please please.

@a.alharoun 2 жыл бұрын

19:36 that consept called clear code any programmer should search for it and learn it to improve his programming skill And There Is says said ""Any Fool Can Write A Code Which Computer Can Understand But Only Good Programmer Who Write A Code Which Human Can Understand""

@heartwagon 5 жыл бұрын

Thank you so much for the tutorial! It really helps me finishing my project

@akashgupta7214 4 ай бұрын

Total JS newbie but got everything, thanks

@declaudefrancois 2 жыл бұрын

Kevin the king of javascript again 😃

@Digital963 3 жыл бұрын

you can also use template literals as so: track.style.transform = `translateX(${amountToMove})`; NOTE: the ` are tilde not quotes I love your content, the "modular" style projects and how you took the time to refactor to give us better understanding. Thanks!

@NiRoDesign 4 жыл бұрын

Amazing video. You are clearly very knowledgeable and I'm loving your videos. In school we just started programming and they only spent a day and a half on javascript then moved along to jquery, so some of this was recognizable, but still very new to all of this and feeling like its something I will never be able to learn. I am building little code snippets just to save for future use though, and I am sure this will come in handy so it is much appreciated. You seem to be open to suggestions for future videos and I would love to see you expand on the carousel some more. It would be great to see how they are built when they rotate on a timer and once they reach the final image, it magically resets to the first one without any backwords scrolling through the images (if that makes sense). I look forward to absorbing more of your knowledge, Thanks again!

@drakoky6894 2 жыл бұрын

00:52:00 In this part I just added the attribute "value" to my html elements like " value="#" "... So in code I just call " currentSlide.value " and I already know what index it is. HTML5 allows you to use custom attributes (must be start with "data-"): then, call with: // More code myDiv.dataset.word myDiv.dataset.key myDiv.dataset.column

@erykkryszewski5803 5 жыл бұрын

awesome series, just finished it :) do you plan to ever do video about wordpress, creating kinda simple landing page, maybe show how to add own CSS styles into WP etc? would like to see such content from you, cause it's typical front/design and you definitely have knack for it

@ExilesGate Жыл бұрын

Thank you Kevin! You are AWESOME!

@maymyatmon4155 3 жыл бұрын

Wow! Thank you so much for this two videos. I learned a lot. Love the way you explaining, it's super clear for a beginner like me. Thanks! :)

@ebesquin Жыл бұрын

Kevin Thank you so much. I learned a lot. Excellent Tutorial

@Cyber99221 3 жыл бұрын

This video was great man! Really motivated me to get started with my own personal projects.

@tejasai3590 5 ай бұрын

Really helpful, worth watching.

@alexlowe9863 4 жыл бұрын

Thanks for the very detailed tutorial. Just what I needed. Next time can you show how to make an infinite carousel? It's just more complicated, and I haven't found a good tutorial that explains the code needed to do it.

@lookupverazhou8599 2 жыл бұрын

Very easy, actually. You are talking about making it loop to the beginning when at the end, etc? Make a second copy of the track, and place it side by side inside a container-track. When you're at the end of that container, move the front track to the end . When you're at the beginning of the container, move the end track to the front. Is that what you're talking about?

@JorgeRodriguez-qx6hw 2 жыл бұрын

Thanks for this tutorial don't worry about the length of the video. It was just fine!!

@laidback-luc 3 жыл бұрын

this was truly a fantastic tutorial - thank you kevin

@kostiantynkarzhanov9216 2 жыл бұрын

Awesome! Kevin, thank you very much for this lesson!

@nimonschess 4 жыл бұрын

Hi Kevin. Super helpful video. Had a question, as slideWidth is calculated on page load, it means that if I change the width of the page and expand/shrink the carousel then the slides are either too big or too small for the container. Do you know if it is possible make this responsive without having to refresh the page?

@lookupverazhou8599 2 жыл бұрын

'resize' event listener. Except why do you need this? It should be working already. The slide widths are based on a 100% of their parent.

@_aumaca 2 жыл бұрын

I learned a lot with your video. Thanks so much!

@MuhammadAhmedAshraf 2 жыл бұрын

You can make your life easier by just doing const items = document.querySelectorAll('.carousel__items) items.forEach((slid, index) and so one and you can get the width by just doing items[0].clientWidth reduce your code

@in2rythem 3 жыл бұрын

Thank Kevin, always a big help for us beginners

@J90JAM 3 жыл бұрын

Implementing this into multiple sections/cards/modals would be helpful too. Every tutorial uses a single implementation on the projects, queryselectorall() is a thing! It'd be good to show how to code it up so it works in multiple places.

@nunu-ig9bz 4 жыл бұрын

such a great video, thank you so much! :DDDD your explanation was so detailed, i really love it, thanks mate! :DD

@yaolin9420 2 жыл бұрын

this course is really amazing , thx for sharing this

@alexawunor8853 5 жыл бұрын

This was great boss Learnt more than just creating a carousel

@khanriza 4 жыл бұрын

Thanks so many things I didn't know and I use Javascript daily

@PeriMoritz 5 жыл бұрын

Great tutorial. I do have a question. How would you address the window resize issue with the carousel__track. Since it is defined on page load, when you make the window wider, the track gets wider, but the calculated image size stays the same, so the next image peeks out. Thanks again.

@KevinPowell 5 жыл бұрын

You could add in another event listener for that if needed. In reality, how many people (outside of developers) change the size of the window once the page has loaded? You could set it up so that the track size is redefined each time one of the event listeners is fired. You could set up a function that defines the track size, have it fire on page load, but then also fire inside the other eventListeners. Alternatively, you could set up an event listener for the window resizing. I'm just not sure either are worth the performance hit. Could be worth looking into though!

@PeriMoritz 5 жыл бұрын

@@KevinPowell I agree that the resizing window thing is a developer thing...in fact when I had that epiphany my life got a lot happier on the development front. For me it's just another learning opportunity and I appreciate your response. I did end up with something that worked, though I know needs work and is probably not the best option, but is a place for me to start. I changed slideWidth to a var and then created a window.eventListener on resize and then multiplied the window.innerWidth by .8 (80%) and it works beautifully (barring performance hit). But like you said, build to build and then make it better from there. Cheers and thanks for your great videos. I learn so much.

@PeriMoritz 5 жыл бұрын

@@KevinPowell Also, if you are looking at the carousel on a mobile device and rotate the screen, it also breaks the carousel.

@KevinPowell 5 жыл бұрын

That's a solid point!

@bitworker2 5 жыл бұрын

Did you find a solution? Maybe you can share the code, thank you

@pubgnhikhelna4140 3 жыл бұрын

slides.forEach((slide, index) => { slide.style.left = slideSize * index + 'px'; }); in this line of code how its know #slide is element and #index is index

@thedinorhino1034 2 жыл бұрын

Amazing video, super useful for one of my university projects! Thank you :)

@shahbokhari 5 жыл бұрын

Superb Explanation! Great Work Kev!

@ramonvidallon4897 3 жыл бұрын

Bravo! Thanks so much, your way of explaining the logic was clear and very simple. Thumbs up and subscribed!

@UMAR.i4u2get 2 жыл бұрын

thank you so much sir!! you made my day today!! it's really very helpful for me..... just a little add in the code at the end of the js file.. put the class (current-slide) anywhere you want in the slides and no need to add in the dots.... // at the start of loading to hide the prev| next button const targetIndex = slides.findIndex((slide) => slide.classList.contains("current-slide") ); showHideArrows(slides, prevBtn, nextBtn, targetIndex); dots.forEach((dot) => { dot.classList.remove("current-slide"); }); // no need to add the class (current-slide) in the index.html file in the dotsNav section dots[targetIndex].classList.add("current-slide");