How To Create An Animated Image Carousel With CSS/JavaScript

Image carousels are some of the oldest web design staples that continue to be incredibly popular to this day. In this video I will show you how to create your very own image carousel with animations in vanilla JS and CSS.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:23 - HTML
02:49 - CSS Styles
07:55 - JavaScript
12:05 - CSS Animations

#ImageCarousel #WDS #JavaScript

[tharunrajoptimus]

You never fail to amaze me. I was watching random stuff and saw this coming. Watched this and I'm sure I won't regret wasting the entire day. Nice video mate.

[Free_Bird]

the fact that you literally don't stop to explain for a bit amaze me. how can you keep explaining without hesitating

[korokiri]

hi just found your channel, and just wanted to put it here
i've been a front end engineer for the past 2-3 years and i found many little things that i newly learn from the way you write the animation Its amazing ! keep it up

[tumbler]

Wow... the javascript part would have taken me HOURS. So elegant.

[flyinoctopus]

Another brilliant tutorial, Kyle. I really appreciate you!
With your help, I feel like I can truly become a web developer :)

[bobdinitto]

I enjoyed this and learned a lot but I'll have to watch at least seven more times to absorb it all. CSS selectors are my weak point so I'm always interested in learning new selector tricks.

[cocoyana]

这老哥写得可以，最近在准备亚麻前端的面试，image carousel是常考mini This bro did a pretty fantastic job! I have been preparing for the amazon FTE interview recently, and the image carousel is a frequently asked question. If you are also looking for a solution to prepare the interview, don't look up the video earlier than 2021, I mean I watched a couple of videos using the BEM method to name the class, that's a good and popular method developer used before whatever in USA or China, but I think it's too redundant. This bro's coding style is pretty good and his logic is great and explains everything in a concise way. I didn't turn on the English subtitle and can follow up on every step with him.

[chinmayghule]

I spent the whole evening creating a carousel that isn't even accessible, but he did it so easily. The part I particularly found difficult was to keep the carousel responsive and make sure it looks good on all sizes.

[kakakakaka]

funny how you've mentioned that the CSS might have been difficult here, yet the only part that I struggled to fully understand was the JS script :D Thanks, very informative video!

[osamapervezriar]

I give Kyle's videos a thumbs up right after the window opens, and then i watch the video after. quality work bro. Thanks

[thomasulatowski]

So concise. A really great example. I learned a lot. Thanks Web Dev SIMPLIFIED!

[jacegarth]

Hi, just found your video here (never seen any of your videos before). 1:18 into the view, paused, subscribed. I can see this is going to be useful...

[chiptaylor]

I learned a lot from this video Kyle. Thank you for all the excellent content you create.

[dhanlitozi]

you make something that took me a whole day to make and doing it while talking. that's awesome.

[robertobellotti]

Something that confused me for a moment was how in the html we are adding attributes such as "data-active" or "data-carousel-button", yet in the javascript we are referencing those attributes with the syntax "element.dataset.active" or I was trying to figure out where the camelCased version of carouselButton came from, but it simply gets translated that way anytime you use "data-something" in the html tag, it will be referenced as element.dataset.something. And apparently if you used multiple dashed words like "data-some-thing-else" then it can be referenced as Ok sure, though I'd recommend using camelCase in your html tags instead for better clarity. For example <p data-some-thing-else> and <p data-someThingElse> will both be referenced as in the javascript, so might as well use the camelCase in the html too

[mykalimba]

8:20 I'd be interested in seeing a video/article that elaborates on this. I don't see how working with attributes instead of classes makes working with JavaScript any easier. If anything, it seems like it'd take more effort to do the same thing when using data attributes (e.g. typing attribute "data-blerg" vs. class name "blerg", vs. querySelectorAll('.blerg'), etc.). Any class name collisions (I think that's what you mean by the term "overlap"?) are avoided by having a good HTML/CSS design ahead of time.

[michaelparkernorton]

Thanks this is going to help a lot as I work to complete my homework assignment for Web Dev Fundamentals II at BYUI this week!

[miguelgra]

This was a huge help, even learned a few new concepts! Thanks Bruv!

[michelaveline]

In Portuguese I would say... "Tu é o cara!!" Once again and again.... thank you.

[FilledStacks]

Great tutorial.
Great tutorial. Thanks for the clarity in the explanation and adding the additional details that might otherwise go un-noticed.