Headphone Slider using Html and CSS with source code

Today we Will Learn How To Make Headphone Slider using Html and CSS and JS

Creating a Dynamic Product Slider: Showcasing Apple AirPods Max with Style

In this exciting web development project, we’ve crafted an engaging and visually appealing product slider to showcase the Apple AirPods Max wireless over-ear headphones. This interactive display combines smooth transitions, dynamic background changes, and responsive design to create an immersive user experience. Let’s dive into the key components and functionality of this sleek product presentation.

HTML Overview:

The HTML structure lays the groundwork for our slider. It creates a main section that houses the product information and images. The content area includes a logo, product details, pricing, and social media links. The image slider contains multiple product images, each representing a different color variant of the AirPods Max.

A unique feature of this layout is the background section, which contains div elements for different gradient backgrounds corresponding to each product color. This sets the stage for our dynamic color-changing effect.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

    <body>
        <section class="slider-main">
            <div class="container">
                <div class="logo">
                    <a href="#"><img src="https://www.yudiz.com/codepen/headphone-slider/logo.svg" alt="logo"></a>
                </div>
                <div class="slider-content-wrap">                
                    <div class="slider-content">
                        <h2 class="heading-style-2">Apple AirPods Max Wireless Over-Ear Headphones.</h2>
                        <p>Active Noise Cancelling, Transparency Mode, Spatial Audio, Digital Crown for Volume Control. Bluetooth Headphones for iPhone </p>
                        <h3 class="heading-style-2">$779.99</h3>
                        <div class="social-icons">
                            <a href="#"><img src="https://www.yudiz.com/codepen/headphone-slider/instagram-icon.svg" alt="instagram"></a>
                            <a href="#"><img src="https://www.yudiz.com/codepen/headphone-slider/facbook-icon.svg" alt="facebook"></a>
                            <a href="#"><img src="https://www.yudiz.com/codepen/headphone-slider/twiter-icon.svg" alt="twitter"></a>
                        </div>
                    </div>               
                </div>         
            </div>
            <div class="slider-images">       
                <img class="slider-image" src="https://www.yudiz.com/codepen/headphone-slider/green.png" alt="headphone image">        
                <img class="slider-image" src="https://www.yudiz.com/codepen/headphone-slider/blue.png" alt="headphone image">        
                <img class="slider-image" src="https://www.yudiz.com/codepen/headphone-slider/red.png" alt="headphone image">        
                <img class="slider-image" src="https://www.yudiz.com/codepen/headphone-slider/white.png" alt="headphone image">        
                <img class="slider-image" src="https://www.yudiz.com/codepen/headphone-slider/black.png" alt="headphone image">        
            </div> 
            <div id="backgrounds">
                <div class="background" style="background: radial-gradient(50% 50% at 50% 50%, #C7F6D0 0%, #7CB686 92.19%);"></div>
                <div class="background" style="background: radial-gradient(50% 50% at 50% 50%, #D1E4F6 0%, #5F9CCF 100%);"></div>
                <div class="background" style="background: radial-gradient(50% 50% at 50% 50%, #FFB7B2 0%, #ED746E 100%);"></div>
                <div class="background" style="background: radial-gradient(50% 50% at 50% 50%, #D7D7D7 0%, #979797 100%);"></div>
                <div class="background" style="background: radial-gradient(50% 50% at 50% 50%, #6B6B6B 0%, #292929 100%);"></div>
            </div>
        </section>   
        <script src="main.js"></script> 
    </body>

</html>

CSS:

The CSS brings a polished and modern look to our slider. It uses the Montserrat font for a clean, contemporary feel. The layout is designed to be fully responsive, adapting seamlessly from desktop to mobile devices.

Key styling elements include:

A gradient background that sets the initial mood.
Carefully crafted typography with different sizes for headings and paragraphs.
Stylish social media icons with hover effects.
Complex positioning and transition effects for the product images.

The product images are positioned absolutely within their container, with different classes (active, next, previous, inactive) controlling their visibility, blur effect, and positioning. This creates a carousel-like effect where images slide in and out of view.

/* author: https://codepen.io/yudizsolutions/pen/PoLJQOa
Yudiz Solutions Limited */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;900&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden;}
img{user-select: none;}
body { overflow-x: hidden; position: relative;font-family: 'Montserrat', sans-serif;height: 100svh;}
a{display: inline-block;}
.heading-style-2{color: #FFF; font-size: 50px; font-weight: 900; line-height: 50px; margin-bottom: 40px;}
p{color: #FFF; font-family: Montserrat; font-size: 18px; font-style: normal; font-weight: 400; line-height: 35px;margin-bottom: 28px;}

/* logo */
.logo a{margin-bottom: 20px;}
.logo a img{width: 271px;height: auto;}
.slider-main{min-height: 700px; background: radial-gradient(50% 50% at 50% 50%, #C7F6D0 0%, #7CB686 92.19%); display: flex; justify-content: space-between; align-items: center; height: 100%; overflow: hidden; position: relative; z-index: 1; }
#backgrounds { position: absolute; width: 100%; height: 100%; top: 0; z-index: -1; }
.background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 2s ease-in-out; }
.container{position: relative; left: calc(50% - (1140px/2)); width: 50%; padding-block: 100px; max-width: 525px; height: 100%; }

/* content */
.slider-content-wrap{display: flex; flex-direction: column; justify-content: center;height: 100%;}
/* social media */
.social-icons{display: flex;align-items: center;gap: 16px;}
.social-icons a{border: 2px solid #fff;border-radius: 50%;width: 45px;height: 45px;display: inline-block;display: flex;justify-content: center;align-items: center;}
.social-icons img{width: 22px;height: 22px;}

/* images */
.slider-images > img.next{
    opacity: 1;   
    transition:  2s; 
    filter: blur(35px); 
    left: 100%; 
    top: 10%;
    transform: translate(-50% , -50%) scale(0.3); 
}
.slider-images > img.active {
    opacity: 1;   
    transform: scale(1); 
    transition:  2s; 
    filter: blur(0px);
    left: 0; 
    top: 50%; 
    transform: translateY(-50%);
    z-index: 1;
}
.slider-images > img.previous{ 
    opacity: 1; 
    transition:  2s; 
    filter: blur(25px); 
    left: 95%; 
    top: 90%;     
}
.slider-images > img.inactive{
    opacity: 0;   
    transition: 2s; 
    filter: blur(35px); 
    left: 100%; 
    top: 100%;
    transform: translate(10%, 10%) scale(0.3);
}
.slider-images { position: relative; width: 50%; height: 100%; top: 0; }
.slider-images > img {    
    position: absolute; 
    top: 0%; 
    left: 100%;
    filter: blur(25px); 
    transform: translate(-50%, -50%) scale(0.3); 
    transition: opacity 3s; 
    object-fit: cover; 
    max-width: 593px; 
    max-height: 779px;
    height: 100%;
    min-height: 320px;
}

/* ========================= media query ============================== */
@media screen and (max-width: 1199px) {
    .logo a img{width: 230px;}
    .heading-style-2{font-size: 40px; line-height: 45px; margin-bottom: 30px; }
    p{font-size: 17px; line-height: 28px; margin-bottom: 22px;}
    .container{left: calc(50% - (920px/2)); padding-block: 80px; max-width: 475px; }   
    .slider-images > img {width: 453px; height: auto;aspect-ratio: 1/1.3;}    
}
@media screen and (max-width: 991px) {
    .logo a img{width: 210px;}
    .heading-style-2{font-size: 35px; line-height: 43px; margin-bottom: 22px;}
    p{font-size: 16px; line-height: 26px; margin-bottom: 18px;}
    .container{left: calc(50% - (720px/2)); padding-block: 70px; max-width: 405px; } 
    .slider-images{width: 45%;}  
    .slider-images > img {width: 340px;aspect-ratio: 1/1.3;}    
}
@media screen and (max-width: 767px) {
    .logo a img{width: 200px;}
    .logo a{margin-bottom: 20px;}
    .slider-main{flex-direction: column;min-height: 900px;}
    .social-icons a{width: 35px;height: 35px;}
    .social-icons img{width: 16px;height: 16px;}
    .container{position: unset; padding-block: 70px; max-width: 540px;width: 100%; } 
    .slider-images{width: 100%;}  
    .slider-images > img {height: 380px;aspect-ratio: 1/1.3; width: auto;} 
    .slider-images > img.active{top: 45%;left: 20%;}   
}
@media screen and (max-width: 575px) {
    .logo a img{width: 180px;}
    .logo a{margin-bottom: 18px;}
    .heading-style-2{font-size: 30px; line-height: 40px; margin-bottom: 20px;}
    p{font-size: 15px; line-height: 24px; margin-bottom: 16px;}
    .social-icons a{width: 32px;height: 32px;}
    .social-icons img{width: 15px;height: 15px;}
    .container{padding: 50px 20px 50px 20px; max-width: 100%;} 
    .slider-images > img {height: 100px;} 
    .slider-images > img.active{top: 50%;left: 5%;}
    .slider-images > img.previous{top: 100%;}   
}

JS:

// Get all the background divs
var backgrounds = document.querySelectorAll('.background');
// Get the slider and the images
const slider = document.querySelector('.slider-images');
const images = Array.from(slider.children);

// Set the initial image index
let imageIndex = 0;

// Update the slider
function updateSlider() {
    // Remove the 'active', 'previous', 'next', and 'inactive' classes from all images
    images.forEach(image => {
        image.classList.remove('active', 'previous', 'next', 'inactive');
    });

    // Add the 'active' class to the current image
    images[imageIndex].classList.add('active');

    // Add the 'previous' class to the image before the current one
    if (imageIndex - 1 >= 0) {
        images[imageIndex - 1].classList.add('previous');
    } else {
        images[images.length - 1].classList.add('previous');
    }

    // Add the 'next' class to the image after the current one
    if (imageIndex + 1 < images.length) {
        images[imageIndex + 1].classList.add('next');
    } else {
        images[0].classList.add('next');
    }

    // Add the 'inactive' class to the other images
    images.forEach((image, index) => {
        if (index !== imageIndex && index !== (imageIndex - 1 + images.length) % images.length && index !== (imageIndex + 1) % images.length) {
            image.classList.add('inactive');
        }
    });

    // Set the opacity of all the background divs to 0
    backgrounds.forEach((background) => {
        background.style.opacity = 0;
    });
    // If the current image is active, set the opacity of the corresponding background div to 1
    if (images[imageIndex].classList.contains('active')) {
        backgrounds[imageIndex].style.opacity = 1;
    }
    // Update the image index
    imageIndex = (imageIndex + 1) % images.length;
}
updateSlider();
// Update the slider every 3 seconds
setInterval(updateSlider, 3000);

images[1].classList.add('next');
images[2].classList.add('inactive');
images[3].classList.add('inactive');
images[4].classList.add('previous');
images[0].classList.add('active');

Remember, the key to mastering these techniques is practice and experimentation. Feel free to adjust the blur intensity, change the background image, or add your own creative touches to make this navbar uniquely yours!

If Your Project is Not Working or Has Any Problem Don’t Worry, Just Click on Below Download Assets File And You Will Be Able To Get Full Control Of Our Projects , Then Customize And Use it For Your Coding Journey. Let the coding adventure begin!

By Downloading this assets You Will Be Able to create an Glass Effect Navbar Using HTML & CSS Which Can Be Used For Several Projects i.e. A Flutter App Using Vs Code or For Android App Using Android Studio And Also For Custom Web Development.