Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <body class="bg-gradient-to-tr from-slate-200 to-slate-50  text-slate-800 flex flex-col justify-center items-center min-h-screen relative px-4">
        <main class="bg-white my-4 w-full max-w-2xl rounded-3xl text-center p-8 sm:p-16 [&_*]:ease-in-out">
            <h1 class="text-xl font-bold">A word from our customers</h1>
            <p class="text-sm">We've been helping businesses do their best since 2018</p>

<div class="mt-6 grid grid-cols-1 sm:grid-cols-[60px_auto_60px] [grid-template-areas:'slider_slider'_'nav-left_nav-right'] sm:[grid-template-areas:'nav-left_slider_nav-right'] gap-2 sm:gap-6
                [&>button]:rounded-full
                [&>button]:w-10
                [&>button]:h-10
                [&>button]:shrink-0
                [&>button]:text-gray-600
                [&>button]:text-2xl
                [&>button]:transition-all 
                [&>button]:duration-500
                [&_button]:relative
                [&_button]:isolate
                [&_button]:bg-black
                sm:[&>button]:mt-8
                before:[&>button]:absolute
                before:[&>button]:inset-px
                before:[&>button]:transition-all
                before:[&>button]:duration-300
                before:[&>button]:-z-10 
                before:[&>button]:rounded-full
                hover:before:[&>button]:inset-full
                before:[&>button]:bg-white
                hover:[&>button]:text-white
                hover:[&>button]:bg-black
                hover:[&>button]:border-black
            ">
                <button data-slide="prev" class="[grid-area:nav-left] material-symbols-outlined">navigate_before</button>
                <div id="slider" class="[grid-area:slider]">
                    <div id="list-cards" class="grid [grid-template-areas:'stack'] overflow-hidden ">
                        
                    </div>
                </div>
                <button data-slide="next" class="[grid-area:nav-right] material-symbols-outlined ">navigate_next</button>
            </div>
        </main>
    
        
        <template id="tpl-card">
            <div class="card [grid-area:stack] opacity-0">
                <blockquote class="bg-black text-white rounded-md p-6 text-sm transition-all duration-500 scale-0 relative isolate
                    before:absolute
                    before:bg-black
                    before:w-4
                    before:h-4
                    before:rotate-45
                    before:-bottom-2
                    before:left-2/4
                    before:-translate-x-2/4
                    before:-z-10
                    before:-translate-y-full
                    before:transition
                    before:duration-500
                    before:delay-500
                "></blockquote>
                <div class="details text-sm translate-y-[150px] transition-all duration-500 flex flex-col items-center gap-2 mt-6">
                    <img review-img class="w-16 h-16 object-cover rounded-full" alt="">
                    <div class="">
                        <p review-name class="text-sm font-bold"></p>
                        <p review-role class="text-xs"></p>
                    </div>  
                </div>
            </div>
        </template>
    </body>
</body>
</html>

console.log("Event Fired")
const REVIEWS = [
    {
        id: 6,
        name: 'Alice',
        role: 'Data Scientist',
        avatar: 'https://i.pravatar.cc/150?img=23',
        review: `Absolutely mind-blowing! From graphics to gameplay, it's a virtual masterpiece. I lost track of time in the immersive experience.`,
    },
    {
        id: 0,
        name: 'Bob',
        role: 'Architect',
        avatar: 'https://i.pravatar.cc/150?img=13',
        review: `A hidden gem for tech enthusiasts. The selection is vast, and the ease of discovering new tech is addictively delightful!`,
    },
    {
        id: 2,
        name: 'Charlie',
        role: 'DevOps Engineer',
        avatar: 'https://i.pravatar.cc/150?img=8',
        review: `Results speak louder than words. I've never seen progress like this. The workflows are challenging but oh-so-rewarding. Kudos!`,
    },
    {
        id: 3,
        name: 'Diana',
        role: 'Product Manager',
        avatar: 'https://i.pravatar.cc/150?img=41',
        review: `It's very easy to customize and categorize lists for new projects/task categories.`,
    },
    {
        id: 13,
        name: 'Ethan',
        role: 'Software Engineer',
        avatar: 'https://i.pravatar.cc/150?img=57',
        review: `An adventure for the curious mind. Every click led to a new discovery. It's like a digital journey through the wonders of the internet.`,
    },
    {
        id: 4,
        name: 'Fiona',
        role: 'Marketing Specialist',
        avatar: 'https://i.pravatar.cc/150?img=42',
        review: `Plan, create, and explore seamlessly. This service made my creative dreams a reality. Smooth navigation, and the recommendations were spot on.`,
    },
    {
        id: 10,
        name: 'George',
        role: 'Software Developer',
        avatar: 'https://i.pravatar.cc/150?img=21',
        review: `A game-changer for organization. Tasks, calendars, notes – everything neatly synced. My life has never been this streamlined. Pure genius!`,
    },
    {
        id: 11,
        name: 'Hannah',
        role: 'Graphic Designer',
        avatar: 'https://i.pravatar.cc/150?img=18',
        review: `Drowning in a sea of creativity. The content here is a visual feast. An endless source of inspiration for my artistic endeavors.`,
    },
    {
        id: 5,
        name: 'Ian',
        role: 'CTO',
        avatar: 'https://i.pravatar.cc/150?img=33',
        review: `Discovering new beats is addictive with this service. The curated playlists are spot-on, and the personalized recommendations are eerily accurate. A music lover's paradise!`,
    },
];

// common vars
let currentCard;

// add reviews to DOM
function renderReviews() {
    const tplCard = document.querySelector("#tpl-card");
    const listCards = document.querySelector("#list-cards");

REVIEWS.forEach((r, idx) => {
        const clone = tplCard.content.cloneNode(true);
        clone.querySelector("blockquote").innerText = `"${r.review}"`;
        clone.querySelector("[review-name]").innerText = r.name;
        clone.querySelector("[review-role]").innerText = r.role;
        clone.querySelector("[review-img]").src = r.avatar;
        if (idx === 0) {
            /// remove translate on first card
            clone.querySelector("div").classList.remove("opacity-0")
            clone.querySelector("blockquote").classList.remove("scale-0", "before:-translate-y-full")
            clone.querySelector(".details").classList.remove("scale-0", "translate-y-[150px]")
            currentCard = clone.querySelector("div");
        }
        listCards.append(clone)
    })
}

// SLIDER
function sliderInit() {
    // add reviews to DOM
    renderReviews()

let currentİndex = 0;
    const slider = document.querySelector("#slider");
    const slides = slider.querySelectorAll(".card");
    const totalSlides = REVIEWS.length;
    const sliderButtons = document.querySelectorAll("[data-slide]");

sliderButtons.forEach(btn => {
        btn.addEventListener("click", (e) => {

sliderButtons[0].classList.add("translate-x-20")
            sliderButtons[1].classList.add("-translate-x-20")
           
            // slide out old current card
            currentCard.querySelector("blockquote").classList.add("scale-0", "before:-translate-y-full")
            currentCard.querySelector(".details").classList.add("scale-0", "translate-y-[150px]")

// move currentİndex forwards or backwards
            if (btn.getAttribute("data-slide") === "prev") {
                currentİndex = (totalSlides + currentİndex - 1) % totalSlides;
            } else {
                currentİndex = (totalSlides + currentİndex + 1) % totalSlides;
            }
            // slide in new current card
            setTimeout(() => {
                currentCard = slides[currentİndex];
                currentCard.classList.remove("opacity-0")
                currentCard.querySelector("blockquote").classList.remove("scale-0","before:-translate-y-full")
                currentCard.querySelector(".details").classList.remove("scale-0", "translate-y-[150px]");

sliderButtons[0].classList.remove("translate-x-20")
                sliderButtons[1].classList.remove("-translate-x-20")
            }, 500)
        })
    })
}

sliderInit();

Frontend Forever App