CSS Slide swipe carousel animation | HTML, CSS & JavaScript

<div class="ambient"></div>

<div class="progress">
        <div class="progress-bar" id="progressBar"></div>
    </div>

<button class="pause" id="pauseBtn">Ⅱ</button>

<h1>
                    Creative
                </h1>

<p>
                    Transform your ideas into beautiful
                    interactive digital experiences.
                </p>

<a href="#" class="cta">
                    Explore More →
                </a>

</div>

</section>

<h1>
                    Design
                </h1>

<p>
                    Create modern interfaces with smooth
                    animations and meaningful interactions.
                </p>

<a href="#" class="cta">
                    Discover Design →
                </a>

</div>

</section>

<h1>
                    Technology
                </h1>

<p>
                    Powerful frontend technologies bringing
                    your digital products to life.
                </p>

<a href="#" class="cta">
                    View Technology →
                </a>

</div>

</section>

<h1>
                    Innovation
                </h1>

<p>
                    Push boundaries with creative ideas,
                    immersive motion and advanced UI.
                </p>

<a href="#" class="cta">
                    Get Inspired →
                </a>

</div>

</section>

<h1>
                    Experience
                </h1>

<p>
                    Every interaction should feel smooth,
                    natural and memorable.
                </p>

<a href="#" class="cta">
                    Start Experience →
                </a>

</div>

</section>

</div>

</div>

</div>

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

:root {
    --ease: cubic-bezier(.22, 1, .36, 1);
}

body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #070b14;
    font-family: Inter, Arial, sans-serif;
    color: #fff;
}

/* =========================
   MAIN SLIDER
========================= */

.slider {
    position: relative;
    width: min(1100px, 94vw);
    height: min(680px, 86vh);
    min-height: 500px;

border-radius: 32px;
    overflow: hidden;

background: #111827;

box-shadow:
        0 40px 100px rgba(0,0,0,.55),
        inset 0 0 0 1px rgba(255,255,255,.08);

perspective: 1400px;

isolation: isolate;

user-select: none;
    touch-action: pan-y;
}

/* =========================
   AMBIENT BACKGROUND
========================= */

.ambient {
    position: absolute;
    inset: -20%;

z-index: -2;

filter: blur(70px);

transition:
        background .8s ease,
        transform 1.2s var(--ease);
}

.slider[data-slide="0"] .ambient {
    background:
        radial-gradient(circle at 20% 30%, #6366f1, transparent 35%),
        radial-gradient(circle at 80% 70%, #a855f7, transparent 35%);
}

.slider[data-slide="1"] .ambient {
    background:
        radial-gradient(circle at 20% 70%, #ec4899, transparent 35%),
        radial-gradient(circle at 80% 30%, #ef4444, transparent 35%);
}

.slider[data-slide="2"] .ambient {
    background:
        radial-gradient(circle at 25% 30%, #06b6d4, transparent 35%),
        radial-gradient(circle at 80% 70%, #2563eb, transparent 35%);
}

.slider[data-slide="3"] .ambient {
    background:
        radial-gradient(circle at 20% 70%, #10b981, transparent 35%),
        radial-gradient(circle at 80% 20%, #14b8a6, transparent 35%);
}

.slider[data-slide="4"] .ambient {
    background:
        radial-gradient(circle at 20% 30%, #f59e0b, transparent 35%),
        radial-gradient(circle at 80% 70%, #ef4444, transparent 35%);
}

/* =========================
   SLIDE TRACK
========================= */

.slides {
    position: relative;

width: 100%;
    height: 100%;

display: flex;

transition:
        transform .8s var(--ease);

will-change: transform;

cursor: grab;
}

.slides.dragging {
    transition: none;
    cursor: grabbing;
}

/* =========================
   SLIDE
========================= */

.slide {
    position: relative;

min-width: 100%;
    height: 100%;

display: grid;
    place-items: center;

overflow: hidden;

transform-style: preserve-3d;
}

/* Background */

.slide-bg {
    position: absolute;
    inset: 0;

transition:
        transform 1s var(--ease),
        opacity .8s ease;

will-change: transform;
}

.slide:nth-child(1) .slide-bg {
    background:
        linear-gradient(135deg,
        rgba(79,70,229,.95),
        rgba(139,92,246,.9));
}

.slide:nth-child(2) .slide-bg {
    background:
        linear-gradient(135deg,
        rgba(219,39,119,.95),
        rgba(244,63,94,.9));
}

.slide:nth-child(3) .slide-bg {
    background:
        linear-gradient(135deg,
        rgba(8,145,178,.95),
        rgba(37,99,235,.9));
}

.slide:nth-child(4) .slide-bg {
    background:
        linear-gradient(135deg,
        rgba(5,150,105,.95),
        rgba(20,184,166,.9));
}

.slide:nth-child(5) .slide-bg {
    background:
        linear-gradient(135deg,
        rgba(245,158,11,.95),
        rgba(239,68,68,.9));
}

/* =========================
   DECORATIVE CIRCLES
========================= */

.orb {
    position: absolute;

border-radius: 50%;

background: rgba(255,255,255,.1);

border: 1px solid rgba(255,255,255,.12);

backdrop-filter: blur(3px);

animation: float 7s ease-in-out infinite;
}

.orb.one {
    width: 420px;
    height: 420px;

top: -180px;
    right: -120px;
}

.orb.two {
    width: 250px;
    height: 250px;

bottom: -130px;
    left: -70px;

animation-delay: -2s;
}

.orb.three {
    width: 90px;
    height: 90px;

top: 20%;
    left: 14%;

animation-delay: -4s;
}

@keyframes float {

0%,100% {
        transform: translate3d(0,0,0);
    }

50% {
        transform: translate3d(0,-25px,0);
    }
}

/* =========================
   CONTENT
========================= */

.content {
    position: relative;

z-index: 5;

width: min(720px, 80%);

text-align: center;

transform:
        translate3d(
            calc(var(--mx, 0) * 1px),
            calc(var(--my, 0) * 1px),
            80px
        );

transition:
        transform .2s ease;
}

/* Number */

.number {
    display: inline-flex;

align-items: center;
    justify-content: center;

margin-bottom: 22px;

padding: 8px 16px;

border-radius: 50px;

background: rgba(255,255,255,.1);

border: 1px solid rgba(255,255,255,.2);

backdrop-filter: blur(12px);

font-size: 12px;
    letter-spacing: 4px;

opacity: 0;

transform:
        translateY(25px)
        scale(.9);

transition:
        .7s var(--ease);

transition-delay: .05s;
}

/* Heading */

.content h1 {
    font-size: clamp(48px, 8vw, 100px);

line-height: .95;

letter-spacing: -4px;

margin-bottom: 28px;

opacity: 0;

transform:
        translateY(50px)
        scale(.94);

transition:
        .8s var(--ease);

transition-delay: .12s;

text-shadow:
        0 15px 50px rgba(0,0,0,.2);
}

/* Paragraph */

.content p {
    max-width: 620px;

margin: auto;

font-size: clamp(15px, 2vw, 19px);

line-height: 1.7;

color: rgba(255,255,255,.86);

opacity: 0;

transform: translateY(35px);

transition:
        .8s var(--ease);

transition-delay: .2s;
}

/* CTA */

.cta {
    display: inline-flex;

margin-top: 32px;

padding: 14px 25px;

border-radius: 50px;

color: #fff;

text-decoration: none;

background: rgba(255,255,255,.12);

border: 1px solid rgba(255,255,255,.3);

backdrop-filter: blur(12px);

opacity: 0;

transform:
        translateY(30px);

transition:
        .7s var(--ease),
        background .25s ease,
        transform .25s ease;

transition-delay: .27s;
}

.cta:hover {
    background: rgba(255,255,255,.25);

transform:
        translateY(-4px)
        scale(1.04);
}

/* =========================
   ACTIVE SLIDE ANIMATION
========================= */

.slide.active .number,
.slide.active h1,
.slide.active p,
.slide.active .cta {

opacity: 1;

transform:
        translateY(0)
        scale(1);
}

.slide.active .slide-bg {
    transform: scale(1.03);
}

/* =========================
   NAV BUTTONS
========================= */

.nav {
    position: absolute;

top: 50%;

width: 58px;
    height: 58px;

border: 1px solid rgba(255,255,255,.25);

border-radius: 50%;

background: rgba(0,0,0,.16);

backdrop-filter: blur(14px);

color: white;

font-size: 24px;

display: grid;
    place-items: center;

cursor: pointer;

z-index: 20;

transition:
        transform .35s var(--ease),
        background .3s ease,
        box-shadow .3s ease;

transform:
        translateY(-50%);
}

.nav:hover {
    background: rgba(255,255,255,.18);

box-shadow:
        0 0 30px rgba(255,255,255,.18);

transform:
        translateY(-50%)
        scale(1.12);
}

.nav:active {
    transform:
        translateY(-50%)
        scale(.9);
}

.prev {
    left: 24px;
}

.next {
    right: 24px;
}

/* =========================
   DOT NAVIGATION
========================= */

.dots {
    position: absolute;

left: 50%;
    bottom: 28px;

transform: translateX(-50%);

display: flex;

gap: 10px;

align-items: center;

z-index: 30;
}

.dot {
    position: relative;

width: 11px;
    height: 11px;

padding: 0;

border: none;

border-radius: 50%;

background: rgba(255,255,255,.35);

cursor: pointer;

transition:
        .4s var(--ease);
}

.dot::before {
    content: "";

position: absolute;

inset: -6px;

border: 1px solid transparent;

border-radius: 50%;

transition: .4s ease;
}

.dot:hover {
    background: white;

transform: scale(1.25);
}

.dot.active {
    width: 36px;

border-radius: 30px;

background: white;

box-shadow:
        0 0 18px rgba(255,255,255,.7);
}

.dot.active::before {
    border-color: rgba(255,255,255,.25);
}

/* =========================
   COUNTER
========================= */

.counter {
    position: absolute;

right: 30px;
    bottom: 28px;

z-index: 20;

font-size: 13px;

letter-spacing: 2px;

color: rgba(255,255,255,.7);
}

/* =========================
   PROGRESS
========================= */

.progress {
    position: absolute;

left: 0;
    top: 0;

width: 100%;
    height: 3px;

z-index: 50;

background: rgba(255,255,255,.12);
}

.progress-bar {
    width: 20%;
    height: 100%;

background: white;

box-shadow:
        0 0 15px rgba(255,255,255,.7);

transition:
        width .6s var(--ease);
}

/* =========================
   PAUSE INDICATOR
========================= */

.pause {
    position: absolute;

top: 25px;
    right: 30px;

z-index: 25;

width: 35px;
    height: 35px;

border-radius: 50%;

display: grid;
    place-items: center;

border: 1px solid rgba(255,255,255,.2);

background: rgba(0,0,0,.12);

color: white;

cursor: pointer;

font-size: 12px;
}

/* =========================
   MOBILE
========================= */

@media(max-width:700px) {

.slider {
        width: 94vw;
        height: 78vh;
        min-height: 480px;

border-radius: 24px;
    }

.content {
        width: 78%;
    }

.content h1 {
        font-size: clamp(46px, 15vw, 75px);
        letter-spacing: -3px;
    }

.content p {
        font-size: 15px;
    }

.nav {
        width: 44px;
        height: 44px;

font-size: 19px;
    }

.prev {
        left: 12px;
    }

.next {
        right: 12px;
    }

.counter {
        display: none;
    }

.pause {
        top: 18px;
        right: 18px;
    }

.dots {
        bottom: 20px;
    }
}

const slider = document.getElementById("slider");

const slidesContainer =
    document.getElementById("slides");

const slideItems =
    document.querySelectorAll(".slide");

const dots =
    document.querySelectorAll(".dot");

const prev =
    document.getElementById("prev");

const next =
    document.getElementById("next");

const counter =
    document.getElementById("counter");

const progressBar =
    document.getElementById("progressBar");

const pauseBtn =
    document.getElementById("pauseBtn");

const total =
    slideItems.length;

/* ==========================================
   VARIABLES
========================================== */

let current = 0;

let startX = 0;
let currentX = 0;

let dragging = false;

let autoplay;

let paused = false;

const autoplayDuration = 5000;

/* ==========================================
   UPDATE
========================================== */

function updateSlider(animation = true) {

if (animation) {

slidesContainer.style.transition =
            "transform .8s cubic-bezier(.22,1,.36,1)";

} else {

slidesContainer.style.transition =
            "none";
    }

slidesContainer.style.transform =
        `translate3d(-${current * 100}%,0,0)`;

/* Active slide */

slideItems.forEach((slide,index) => {

slide.classList.toggle(
            "active",
            index === current
        );

});

/* Active dot */

dots.forEach((dot,index) => {

dot.classList.toggle(
            "active",
            index === current
        );

});

/* Slider state */

slider.dataset.slide = current;

/* Counter */

counter.textContent =
        `${String(current + 1).padStart(2,"0")} — ${String(total).padStart(2,"0")}`;

/* Progress */

progressBar.style.width =
        `${((current + 1) / total) * 100}%`;
}

/* ==========================================
   NEXT
========================================== */

function nextSlide() {

current++;

if (current >= total) {
        current = 0;
    }

updateSlider();

}

/* ==========================================
   PREVIOUS
========================================== */

function previousSlide() {

current--;

if (current < 0) {
        current = total - 1;
    }

updateSlider();

}

/* ==========================================
   BUTTONS
========================================== */

next.addEventListener("click", () => {

nextSlide();

restartAutoplay();

});

prev.addEventListener("click", () => {

previousSlide();

restartAutoplay();

});

/* ==========================================
   DOTS
========================================== */

dots.forEach(dot => {

dot.addEventListener("click", () => {

current =
            Number(dot.dataset.index);

updateSlider();

restartAutoplay();

});

/* ==========================================
   TOUCH START
========================================== */

slider.addEventListener(
    "touchstart",
    e => {

startX =
            e.touches[0].clientX;

currentX = startX;

dragging = true;

slidesContainer.classList.add("dragging");

stopAutoplay();

},
    { passive:true }
);

/* ==========================================
   TOUCH MOVE
========================================== */

slider.addEventListener(
    "touchmove",
    e => {

if (!dragging) return;

currentX =
            e.touches[0].clientX;

dragMove();

},
    { passive:true }
);

/* ==========================================
   TOUCH END
========================================== */

slider.addEventListener(
    "touchend",
    finishDrag
);

/* ==========================================
   MOUSE START
========================================== */

slider.addEventListener(
    "mousedown",
    e => {

if (
            e.target.closest(".nav") ||
            e.target.closest(".dot") ||
            e.target.closest(".cta") ||
            e.target.closest(".pause")
        ) {
            return;
        }

startX = e.clientX;

currentX = startX;

dragging = true;

slidesContainer.classList.add("dragging");

stopAutoplay();

}
);

/* ==========================================
   MOUSE MOVE
========================================== */

window.addEventListener(
    "mousemove",
    e => {

if (!dragging) return;

currentX = e.clientX;

dragMove();

}
);

/* ==========================================
   MOUSE UP
========================================== */

window.addEventListener(
    "mouseup",
    finishDrag
);

/* ==========================================
   DRAG MOVE
========================================== */

function dragMove() {

const distance =
        currentX - startX;

const width =
        slider.offsetWidth;

let percentage =
        (distance / width) * 100;

/*
       Elastic resistance
       when reaching the first/last slide
    */

if (
        (current === 0 && percentage > 0) ||
        (current === total - 1 && percentage < 0)
    ) {

percentage *= .35;

}

const position =
        (-current * 100) + percentage;

slidesContainer.style.transform =
        `translate3d(${position}%,0,0)`;
}

/* ==========================================
   FINISH DRAG
========================================== */

function finishDrag() {

if (!dragging) return;

const distance =
        currentX - startX;

const threshold =
        slider.offsetWidth * .15;

dragging = false;

slidesContainer.classList.remove("dragging");

if (Math.abs(distance) > threshold) {

if (distance < 0) {

nextSlide();

} else {

previousSlide();

}

} else {

updateSlider();

}

restartAutoplay();
}

/* ==========================================
   MOUSE PARALLAX
========================================== */

slider.addEventListener(
    "mousemove",
    e => {

if (dragging) return;

const rect =
            slider.getBoundingClientRect();

const x =
            e.clientX - rect.left;

const y =
            e.clientY - rect.top;

const rotateX =
            ((y / rect.height) - .5) * -6;

const rotateY =
            ((x / rect.width) - .5) * 6;

const content =
            slider.querySelector(".slide.active .content");

if (content) {

content.style.setProperty(
                "--mx",
                `${rotateY}`
            );

content.style.setProperty(
                "--my",
                `${rotateX}`
            );

}

const ambient =
            document.querySelector(".ambient");

ambient.style.transform =
            `translate(${rotateY * -3}px,
                       ${rotateX * -3}px)`;
    }
);

/* ==========================================
   RESET PARALLAX
========================================== */

slider.addEventListener(
    "mouseleave",
    () => {

const content =
            slider.querySelector(".slide.active .content");

if (content) {

content.style.setProperty(
                "--mx",
                "0"
            );

content.style.setProperty(
                "--my",
                "0"
            );

}

document.querySelector(".ambient")
            .style.transform =
            "translate(0,0)";
    }
);

/* ==========================================
   KEYBOARD
========================================== */

document.addEventListener(
    "keydown",
    e => {

if (e.key === "ArrowRight") {

nextSlide();

restartAutoplay();

}

if (e.key === "ArrowLeft") {

previousSlide();

restartAutoplay();

}

if (e.key === " ") {

e.preventDefault();

toggleAutoplay();

}

}
);

/* ==========================================
   AUTOPLAY
========================================== */

function startAutoplay() {

stopAutoplay();

if (paused) return;

autoplay =
        setInterval(
            nextSlide,
            autoplayDuration
        );
}

function stopAutoplay() {

clearInterval(autoplay);

}

function restartAutoplay() {

startAutoplay();

}

/* ==========================================
   PAUSE
========================================== */

function toggleAutoplay() {

paused = !paused;

if (paused) {

stopAutoplay();

pauseBtn.textContent = "▶";

} else {

startAutoplay();

pauseBtn.textContent = "Ⅱ";

}

pauseBtn.addEventListener(
    "click",
    toggleAutoplay
);

/* ==========================================
   HOVER PAUSE
========================================== */

slider.addEventListener(
    "mouseenter",
    () => {

if (!dragging) {
            stopAutoplay();
        }

}
);

slider.addEventListener(
    "mouseleave",
    () => {

if (!paused) {
            startAutoplay();
        }

}
);

updateSlider(false);

startAutoplay();

- CSS Slide swipe carousel animation

Live Preview