Image Sliders
Posted on 08 Dec 2022
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! :)
Featured Projects
Scroll left and right to see more.
A lame joke…
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat aliquid consequuntur ducimus id eligendi sequi sapiente est corrupti illum autem!
Nulla exercitationem tempore, molestiae laborum cum ullam culpa facere magni suscipit? Mollitia assumenda fugiat temporibus perferendis quaerat, error eum quasi.
Repellendus enim nemo similique, nobis hic sit dolor molestiae accusamus rem sequi dolorem est vitae corrupti! Dolorem sequi magni dolore.