Image Sliders

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.