Pointers for Creating a Functioning Image Carousel Using CSS and HTML

Chances are that you've attended a site or six and noticed that there are affiliate sections that slide images along like a scrolling marquee. Instead of text, these are typically logos, images of products or other aesthetic elements. Everyone knows how to get a smooth-scrolling text strip rolling sideways or vertically on their page, but images are a different matter: They're a bit more resource-intensive and a lot less common than text sliders. Naturally, you're less likely to know how to pull one of these off — correctly, that is.
A YouTuber, Dev Ed, created a video that provides a blow-by-blow breakdown of how to display an image carousel on your web page. The man, who's anything but shy, casts his face right there in the bottom corner and narrates each up and down in the process, pulling up an HTML document and firing away with strings of familiar commands to show what makes it tick behind the scenes. It's simple stuff once you get it down pat. Also worth noting is the plethora of similar videos on his page, which show you how to do everything else under the sun with CSS and HTML, but that's for you to uncover in your own time.
Rather than take the words out of Ed's mouth and slap them down in this article, we're going to quickly provide amends to some of the mistakes he made during his presentation:1. Wrap it all up inside a function.
Don't leave your code floating in the global (root) namespace. This could result in conflicts down the road if you're implementing this markup in a serious and practical environment. To Ed's credit, he was probably just showing the markup itself, but it's important to always identify your namespace.2. It's probably not necessary to repeat carouselSlide.style.
While this method does work, you could just as well abstract it and wrap the code in a "for each" command instead of implementing what's essentially multiple carousels on a single page.3. It's not all-important, but try using regular syntax instead of arrow functions.
This ultimately comes down to user preference. For more information click here https://youtu.be/KcdBOoK3Pfw.