A collection of vanilla JavaScript image sliders with multiple orientation options. Built without dependencies using modern CSS transforms and data attributes.
Tech Stack
- Frontend: HTML, CSS, JavaScript
- Deployment: GitHub Pages
- Highlights: CSS Transforms, Data Attributes, Overflow Control
Features:
- Horizontal and vertical orientations
- Smooth CSS transitions
- No external dependencies
- Clean, semantic markup
How it works: Slides are contained with overflow: hidden, then JavaScript uses transform: translateX() to move between slides. Data attributes provide clean element targeting.
Inspired by tutorials from Kevin Powell and Traversy Media, adapted for multiple slider variations.
javascriptslidervanilla-jscss-animations