Apple Style Minimal Luxury Slider | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apple-Style Minimal Luxury Slider</title>
    
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&display=swap" rel="stylesheet">
    
  
</head>
<body>

<div class="slide active">
            
            <div class="slide-bg" style="background-image: url('https://images.unsplash.com/photo-1469334031218-e382a71b716b?q=80&w=2000&auto=format&fit=crop');"></div>
            <div class="content">
                <h1 class="headline">Serenity.</h1>
                <p class="description">Find your peace in the misty mountains of isolation.</p>
                <a href="#" class="cta-link">
                    Discover Iceland
                    <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                </a>
            </div>
        </div>

<div class="slide">
            <div class="slide-bg" style="background-image: url('https://images.unsplash.com/photo-1498623116890-37e912163d5d?q=80&w=2000&auto=format&fit=crop');"></div>
            <div class="content">
                <h1 class="headline">Breathe.</h1>
                <p class="description">Listen to the rhythm of untouched ocean waves.</p>
                <a href="#" class="cta-link">
                    Explore Maldives
                    <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                </a>
            </div>
        </div>

<div class="slide">
            <div class="slide-bg" style="background-image: url('https://images.unsplash.com/photo-1517260739337-6799d239ce83?q=80&w=2000&auto=format&fit=crop');"></div>
            <div class="content">
                <h1 class="headline">Silence.</h1>
                <p class="description">Experience the stillness of the endless winter nights.</p>
                <a href="#" class="cta-link">
                    Visit Norway
                    <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                </a>
            </div>
        </div>

<div class="pagination" id="dotsContainer">
            <div class="dot active" data-index="0"></div>
            <div class="dot" data-index="1"></div>
            <div class="dot" data-index="2"></div>
        </div>

</div>

</body>
</html>

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Inter', sans-serif;
            background-color: #000;
            overflow: hidden; /* Hide scrollbars */
        }

.slider-container {
            position: relative;
            width: 100vw;
            height: 100vh;
        }

.slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            pointer-events: none; /* Prevent clicks on hidden slides */
        }

.slide.active {
            z-index: 2;
            pointer-events: auto;
        }

/* 
         * The Soft Background Effect 
         * Base state: Blurred, dark, and slightly scaled down
         */
        .slide-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            /* Start with a blur for the lens focus effect */
            filter: blur(10px) brightness(0.4);
            transform: scale(1.02);
            /* Ultra-smooth long transition */
            transition: filter 2.5s ease-in-out, transform 12s linear, opacity 2s ease;
            opacity: 0;
            z-index: 1;
        }

/* 
         * Active state: Focuses in, brightens up, and starts slow continuous zoom 
         */
        .slide.active .slide-bg {
            filter: blur(0px) brightness(0.7);
            transform: scale(1.1);
            opacity: 1;
        }

/* Minimal Content Wrapper */
        .content {
            position: relative;
            z-index: 2;
            text-align: center;
            color: #fff;
            padding: 0 20px;
        }

/* Typography - Apple Style */
        .headline {
            font-size: 5rem;
            font-weight: 300; /* Thin, elegant weight */
            letter-spacing: -2px; /* Tight tracking like Apple headings */
            margin-bottom: 16px;
        }

.description {
            font-size: 1.25rem;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.7); /* Subtle grey/white */
            margin-bottom: 40px;
            letter-spacing: 0.5px;
        }

/* Apple-style minimalist CTA link */
        .cta-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #fff;
            text-decoration: none;
            font-size: 1rem;
            font-weight: 400;
            padding-bottom: 4px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
            transition: border-color 0.4s ease, gap 0.4s ease;
        }

.cta-link svg {
            width: 14px;
            height: 14px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            transition: transform 0.4s ease;
        }

.cta-link:hover {
            border-bottom-color: #fff;
            gap: 12px; /* Arrow moves slightly on hover */
        }

/* Text Animation Sequence (Drift up and fade in) */
        .headline, .description, .cta-link {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 1.5s cubic-bezier(0.25, 0.1, 0.25, 1), 
                        transform 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
        }

/* Delays for active slide */
        .slide.active .headline {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.6s;
        }

.slide.active .description {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.9s;
        }

.slide.active .cta-link {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 1.2s;
        }

/* Ultra Minimal Dots */
        .pagination {
            position: absolute;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 16px;
            z-index: 10;
        }

.dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #fff;
            opacity: 0.2;
            cursor: pointer;
            transition: opacity 0.5s ease, transform 0.5s ease;
        }

.dot:hover {
            opacity: 0.6;
        }

.dot.active {
            opacity: 1;
            transform: scale(1.5); /* Subtle scale for active dot */
        }

/* Responsive Settings */
        @media (max-width: 768px) {
            .headline { font-size: 3.5rem; letter-spacing: -1px; }
            .description { font-size: 1.1rem; }
        }

JavaScript

document.addEventListener('DOMContentLoaded', () => {
            const slides = document.querySelectorAll('.slide');
            const dots = document.querySelectorAll('.dot');
            let currentIndex = 0;
            const duration = 7000; // 7 seconds per slide for a calm, slow pace
            let slideInterval;

function changeSlide(index) {
                // Remove active class from everywhere
                slides.forEach(slide => slide.classList.remove('active'));
                dots.forEach(dot => dot.classList.remove('active'));

// Add active class to target
                slides[index].classList.add('active');
                dots[index].classList.add('active');
                
                currentIndex = index;
            }

function nextSlide() {
                let nextIndex = (currentIndex + 1) % slides.length;
                changeSlide(nextIndex);
            }

// Dot Click Events
            dots.forEach(dot => {
                dot.addEventListener('click', function() {
                    const index = parseInt(this.getAttribute('data-index'));
                    if(index !== currentIndex) {
                        changeSlide(index);
                        resetTimer();
                    }
                });
            });

// Auto Play
            function startTimer() {
                slideInterval = setInterval(nextSlide, duration);
            }

function resetTimer() {
                clearInterval(slideInterval);
                startTimer();
            }

// Initialize
            startTimer();
        });

Apple Style Minimal Luxury Slider Preview

Download Options