Responsive Image Slider Build

I need a lean, responsive background image slider built with vanilla HTML, CSS, and JavaScript. The slider will sit at the very top of my page as a full-width hero, and it must hold well over ten high-resolution images without choking performance.

Key behaviour
• Images advance only when the visitor clicks a visible Next / Prev control—no automatic rotation.
• A compact thumbnail strip (or dots that show the actual thumbnails on hover) lets the user jump straight to any image.

Core requirements
• Fluid layout that scales seamlessly from mobile to large desktop.
• Hardware-accelerated, smooth transitions (fade or slide) with no jank.
• Clean, commented code: one HTML file, a modular CSS sheet, and a single JS module.
• Easy plug-and-play: I want to drop the slider folder into any project, change the image paths, and be done.

Acceptance criteria
1. Demonstrate with at least 12 placeholder images.
2. Loading time under two seconds on a 3G network (Lighthouse performance).
3. No external libraries; pure JavaScript only.
4. Works in the latest Chrome, Firefox, Safari, and Edge.

Please include a short README so I know where to swap images and tweak timing. If you’ve got a live demo or past work that proves smooth thumbnail navigation, share it—I’ll pick quickly.