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

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 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'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 YouTube channel, make sure to follow me on Instagram and Twitter.

[dtdionne]

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.

[derekherincx]

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!

[emmanueleze]

This is by far the best explained carousel Vanilla JS tutorial on YouTube. 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!

[MsAnnieHuang]

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

[bitetheapple]

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

[leightonbuchanan-cates]

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!

[MrKoniInTech]

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

[korragnarok]

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

[antoniabradford]

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.

[rohitprabhu]

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

[doneilchapman]

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.

[bongajewelmsimang]

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

[fernandoboschiero]

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

[jaypatel]

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

[gaelfeilemen]

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

[smohammadhn]

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

[nohael-deeb]

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

[Anuta]

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!

[lookupverazhou]

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

[Digital]

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