Beginner•Web Development

Image Slider

Build a modern, fully responsive Image Slider (Carousel) using only HTML, CSS, and vanilla JavaScript. Features smooth slide transitions, auto-play with a live progress bar, dot indicators, touch/swipe support, and stylish caption overlays — all wrapped in a clean light-theme UI with micro-animations and zero dependencies.

📚Scroll down to see free videos & courses ↓

View on GitHub Live Demo

What You Will Build

A fully functional image carousel with a clean light-theme design. Users can navigate slides using previous/next arrow buttons or clickable dot indicators. The slider auto-advances every 5 seconds, with an animated progress bar showing time remaining. Each slide features a caption overlay with a category tag, title, and subtitle that animate in per slide. Auto-play pauses on hover and resumes after manual interaction. Full touch/swipe support is implemented via the Touch Events API, and keyboard arrow keys also control navigation. A loading spinner is shown until the first image loads, and a play/pause toggle button gives users full control. The layout is fully responsive across mobile, tablet, and desktop screens.

Concepts You'll Learn

Structuring a multi-section page with semantic HTML5 and ARIA accessibility attributes
Styling a light-theme UI with CSS custom properties and solid color design tokens
Building a horizontal CSS slide track using Flexbox and translateX transforms
Implementing smooth slide transitions with cubic-bezier easing and will-change optimization
Creating animated caption overlays with CSS transform and opacity transitions
Applying a subtle Ken Burns zoom effect on the active slide image
Building an auto-play timer with setTimeout and a live CSS progress bar animation
Pausing auto-play on mouseenter and focusin events and resuming on leave
Scheduling auto-play restart after manual user interaction with a debounce timeout
Implementing touch swipe detection with touchstart, touchmove, and touchend events
Preventing vertical page scroll during horizontal swipe with event.preventDefault()
Adding keyboard navigation using the ArrowLeft and ArrowRight key events
Building expandable dot indicators that animate width on the active state
Displaying a loading spinner until the first image fires its load event
Writing clean, modular, and beginner-friendly vanilla JavaScript with an IIFE pattern
Applying responsive layout adjustments with CSS media queries for mobile screens
Respecting user accessibility preferences with the prefers-reduced-motion media query