If you’re looking to build a modern, animated product slider just like the ones Apple uses to showcase their devices, you’re in the right place. In this guide, I’ll show you how I built a clean and responsive Apple Headphone Product Slider using HTML, CSS, and JavaScript — and you can download the complete project from my GitHub.

👉 GitHub Project:
🔗 Apple Headphone Product Slider Frontend

🎨 What This Slider Does

This project replicates the minimal and premium feel of Apple’s product sections. It automatically slides between headphone colors, changes the background gradient, and smoothly transitions with a beautiful animation.

You’ll learn how to:

Build a product slider using pure HTML, CSS, and JavaScript
Create smooth fade and scale animations
Change the background color dynamically
Make the slider fully responsive
Keep your design lightweight and SEO-friendly

⚙️ Technologies Used

Technology	Purpose
HTML5	Structure of the slider
CSS3	Styling, animations, transitions
JavaScript (Vanilla JS)	Controls automatic image switching and color changes

This project doesn’t rely on any external libraries — it’s pure frontend development. Perfect for learning or showcasing your skills.

💻 Step 1: HTML Code

Create a file named index.html and paste the following code:

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Apple Headphone Product Slider</title>
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>
  <nav>
    <img src="assets/logo.svg" alt="Logo" />
    <ul>
      <li><img src="assets/apple-icon.png" alt="Apple Icon" /></li>
      <li><a href="#">Store</a></li>
      <li><a href="#">Mac</a></li>
      <li><a href="#">iPad</a></li>
      <li><a href="#">iPhone</a></li>
      <li><a href="#">Watch</a></li>
    </ul>
  </nav>
  <section>
      <h1>AirPods Max</h1>
      <p>High-fidelity audio with Active Noise Cancellation.</p>
      <button>Buy Now</button>
      <img src="assets/green.png" alt="Green Headphone" />
      <img src="assets/blue.png" alt="Blue Headphone" />
      <img src="assets/red.png" alt="Red Headphone" />
      <img src="assets/white.png" alt="White Headphone" />
      <img src="assets/black.png" alt="Black Headphone" />
  </section>
  <footer>
    <p>Follow us:</p>
      <img src="assets/instagram-icon.svg" alt="Instagram" />
      <img src="assets/facbook-icon.svg" alt="Facebook" />
      <img src="assets/twiter-icon.svg" alt="Twitter" />
  </footer>
</body>
</html>

🎨 Step 2: CSS Code

Now, create css/style.css and add the following:

				
					* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body {
  background: linear-gradient(135deg, #a0e8af, #76b947);
  transition: background 1s ease-in-out;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 60px;
}
nav ul {
  display: flex;
  list-style: none;
  gap: 20px;
}
nav a {
  color: #000;
  text-decoration: none;
  font-weight: 500;
}
.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 60px;
  flex-wrap: wrap;
}
.text h1 {
  font-size: 3rem;
  color: #111;
}
.text p {
  margin: 10px 0 20px;
  font-size: 1.2rem;
  color: #555;
}
button {
  background: #111;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  cursor: pointer;
}
.slider {
  position: relative;
  width: 350px;
  height: 350px;
}
.slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: scale(0.9);
  transition: all 1s ease-in-out;
}
.slider img.active {
  opacity: 1;
  transform: scale(1);
}
footer {
  text-align: center;
  padding: 30px;
  background: #f3f3f3;
}
.social img {
  width: 30px;
  margin: 0 10px;
  cursor: pointer;
}

⚙️ Step 3: JavaScript Code

Finally, create js/script.js and paste this:

				
					const images = document.querySelectorAll(".slider img");
const colors = [
  "linear-gradient(135deg, #a0e8af, #76b947)",
  "linear-gradient(135deg, #7db9e8, #1e5799)",
  "linear-gradient(135deg, #ff9a9e, #f6416c)",
  "linear-gradient(135deg, #ffffff, #ddd)",
  "linear-gradient(135deg, #2c3e50, #000)"
];
let current = 0;
function changeSlide() {
  images.forEach((img, i) => {
    img.classList.remove("active");
    if (i === current) img.classList.add("active");
  });
  document.body.style.background = colors[current];
  current = (current + 1) % images.length;
}
setInterval(changeSlide, 3500);

💡 Why You’ll Love This Project

This project is:

Pure frontend (no libraries)
Easy to customize — replace images and colors as you like
Perfect for portfolios, product pages, or learning animation logic

It’s also a great practice project if you’re learning HTML, CSS, and JS together.

🚀 How to Run the Project

Download or clone the repo:
🔗 GitHub Repository
Open the folder in VS Code.
Install the Live Server extension.
Right-click index.html → Open with Live Server.

Your slider will start rotating headphone colors with dynamic background transitions.

🔗 Download Full Project with Assets

Feel free to fork it, modify colors, and make it your own — and don’t forget to star the repo if you found it helpful!

DOWNLOAD ZIP FILE

1. How to Use / Installation Guide

Provide a step-by-step guide on how to integrate the slider in a project:

Download the code
- Link to the zip / GitHub / code block.
Include files in your project
- Add the HTML structure (.html file).
- Link the CSS stylesheet.
- Link the JS file (or include inline).
Initialize / Configure the slider
- Explain any JavaScript initialization needed (e.g. new Slider({ ...options })).
- Mention default configuration values (speed, autoplay, loop).
Customize the content
- How to change images: swap <img> URLs in HTML.
- How to tweak styles: edit CSS variables or class names.
- How to add or remove slider items.
Deploy
- Tips for production: minify CSS / JS, optimize images, test performance.

2. Use Cases / When to Use This Slider

Suggest real-world scenarios where this slider is useful:

E-commerce websites: to showcase featured products (like headphones or other gadgets).
Portfolio sites: for designers / developers to demonstrate product UI components.
Landing pages: in hero section or product demo area.
Blog tutorials: teaching others how to build a slider with JS & CSS.
Prototypes / MVPs: quickly mock up product views without building from scratch.

3. Code Explanation / Breakdown

Break down the code architecture so readers (especially developers) understand what's going on:

HTML structure: describe container, slides, navigation (prev/next), and any indicators.
CSS Styling: explain how the styles are organized (e.g. layout, transitions, variables).
JavaScript logic:
- How slide switching works
- How autoplay is implemented (if applicable)
- How responsive behavior is handled
- Events (e.g. click, mouseover, touch)

Including inline code snippets or comments here can increase value.

4. Performance / Best Practices

Tips for optimizing performance:

Compress or optimize slider images for faster load.
Lazy-load images if there are many slides.
Minify JS and CSS.
Avoid too many simultaneous animations that might hurt performance on mobile.
Use requestAnimationFrame or CSS for animations (if relevant) for smoother transitions.

5. Browser Compatibility & Testing

Explain how you tested it and which browsers / devices are supported:

Tested on: Chrome, Safari, Firefox, Edge
Works on mobile and desktop
Known issues (if any) + possible fixes

6. Accessibility

If applicable, mention the accessibility features:

Keyboard navigation (arrow keys to move slider)
aria roles / attributes used
Focus management

If you haven’t added accessibility yet, you could note that as a “future improvement” and invite contributions.

Prodcut Slider

Posts tagged Prodcut Slider

Apple Headphone Product Slider — HTML, CSS & JS (Free Code + Download)