Image Sliders

Posted on 08 Dec 2022

JavaScript Demo

JavaScript

My own solution to a simple image slider without any plugins.

Project Screenshot

Click on image to enlarge

Tech Stack

Frontend

HTML, CSS, JS

Deployment

GitHub Pages

Highlights

CSS Grid, Flexbox, Translate

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