Image Sliders

About

This is my HTML, CSS & JS image slider solution. I’ve included several other options which includes a vertical orientation. The solution uses a combination of modern CSS tricks and JavaScript to get the slider to work. Bascially the slides are inside a container with the overflow property set to hidden. Then I use JavaScript and translate to move the slides back and forth. Data attributes are used to reference the elements in JavaScript. This project uses what I’ve learned from Kevin Powell’s :has() opens up new possibilities with CSS video and Traversy Media’s Build 5 Projects With HTML, CSS & JavaScript video to build these sliders. Feel free to use the code in your own projects! :)