How to create a sliding testimonial section using html css

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Retro-Modern Testimonial Carousel</title> </head> <body> <h1>What Our Customers Say</h1> <div class="carousel-container"> <button class="nav-btn prev"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M15 18l-6-6 6-6"/> </svg> </button> <div class="carousel"> <div class="testimonial-card active"> <img src="https://i.pravatar.cc/150?img=1" alt="Avatar" class="avatar"> <p class="quote">This product completely transformed my workflow. The retro aesthetic with modern functionality is exactly what I needed.</p> <h3 class="name">Sarah Johnson</h3> <p class="role">Creative Director</p> <div class="stars">★★★★★</div> </div> <div class="testimonial-card"> <img src="https://i.pravatar.cc/150?img=3" alt="Avatar" class="avatar"> <p class="quote">I was skeptical at first, but after using it for a week I can't imagine going back. The attention to detail is incredible.</p> <h3 class="name">Michael Chen</h3> <p class="role">UX Designer</p> <div class="stars">★★★★☆</div> </div> <div class="testimonial-card"> <img src="https://i.pravatar.cc/150?img=5" alt="Avatar" class="avatar"> <p class="quote">The perfect blend of nostalgia and innovation. It's like my childhood dreams mixed with futuristic tech.</p> <h3 class="name">Emma Rodriguez</h3> <p class="role">Developer</p> <div class="stars">★★★★★</div> </div> <div class="testimonial-card"> <img src="https://i.pravatar.cc/150?img=7" alt="Avatar" class="avatar"> <p class="quote">The customer support alone is worth the price. When I had an issue, they responded within minutes with a solution.</p> <h3 class="name">David Kim</h3> <p class="role">Product Manager</p> <div class="stars">★★★★★</div> </div> <div class="testimonial-card"> <img src="https://i.pravatar.cc/150?img=9" alt="Avatar" class="avatar"> <p class="quote">I've recommended this to all my colleagues. The retro vibes give it such a unique personality compared to other tools.</p> <h3 class="name">Lisa Wong</h3> <p class="role">Art Director</p> <div class="stars">★★★★☆</div> </div> </div> <button class="nav-btn next"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M9 18l6-6-6-6"/> </svg> </button> <div class="dots"></div> </div> </body> </html>

CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension.


     :root {
            --bg-color: #f5f0e8;
            --card-bg: #ffffff;
            --primary: #6b5b95;
            --secondary: #d64161;
            --accent: #ff7b25;
            --text: #3e3e3e;
            --text-light: #7a7a7a;
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
        }

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

        body {
            font-family: 'Courier New', Courier, monospace;
            background-color: var(--bg-color);
            color: var(--text);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            position: relative;
            overflow-x: hidden;
        }

        body::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: var(--grain);
            pointer-events: none;
            z-index: -1;
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 3rem;
            color: var(--primary);
            text-align: center;
            font-weight: 700;
            letter-spacing: -0.5px;
        }

        .carousel-container {
            width: 100%;
            max-width: 1200px;
            position: relative;
        }

        .carousel {
            display: flex;
            gap: 2rem;
            padding: 2rem 0;
            scroll-snap-type: x mandatory;
            overflow-x: scroll;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            margin-bottom: 1rem;
        }

        .carousel::-webkit-scrollbar {
            display: none;
        }

        .testimonial-card {
            scroll-snap-align: center;
            min-width: 300px;
            max-width: 350px;
            background-color: var(--card-bg);
            border-radius: 16px;
            padding: 2rem;
            box-shadow: var(--shadow);
            transition: all 0.3s ease;
            position: relative;
            flex: 1;
            opacity: 0.7;
        }

        .testimonial-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 8px;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            border-radius: 16px 16px 0 0;
        }

        .testimonial-card.active {
            transform: scale(1.05);
            opacity: 1;
        }

        .testimonial-card.active .quote {
            color: var(--text);
        }

        .avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 1.5rem;
            border: 3px solid var(--card-bg);
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }

        .quote {
            font-size: 1rem;
            line-height: 1.6;
            margin-bottom: 1.5rem;
            color: var(--text-light);
            font-style: italic;
            position: relative;
        }

        .quote::before,
        .quote::after {
            content: '"';
            font-size: 1.5rem;
            color: var(--accent);
            opacity: 0.5;
        }

        .name {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 0.25rem;
            color: var(--primary);
        }

        .role {
            font-size: 0.9rem;
            color: var(--text-light);
            margin-bottom: 1rem;
        }

        .stars {
            color: var(--accent);
            font-size: 1rem;
            letter-spacing: 2px;
        }

        .nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: var(--card-bg);
            border: none;
            box-shadow: var(--shadow);
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1;
            transition: all 0.3s ease;
        }

        .nav-btn:hover {
            background-color: var(--primary);
            color: white;
        }

        .nav-btn.prev {
            left: -25px;
        }

        .nav-btn.next {
            right: -25px;
        }

        .nav-btn svg {
            width: 20px;
            height: 20px;
        }

        .dots {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 1rem;
        }

        .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: var(--text-light);
            opacity: 0.3;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .dot.active {
            background-color: var(--primary);
            opacity: 1;
            transform: scale(1.2);
        }

        @media (max-width: 768px) {
            .carousel {
                gap: 1rem;
            }

            .testimonial-card {
                min-width: 85%;
            }

            .nav-btn {
                width: 40px;
                height: 40px;
            }

            .nav-btn.prev {
                left: -20px;
            }

            .nav-btn.next {
                right: -20px;
            }
        }

JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension.


    document.addEventListener('DOMContentLoaded', function() {
            const carousel = document.querySelector('.carousel');
            const cards = document.querySelectorAll('.testimonial-card');
            const prevBtn = document.querySelector('.prev');
            const nextBtn = document.querySelector('.next');
            const dotsContainer = document.querySelector('.dots');
            
            let currentIndex = 0;
            let autoScrollInterval;
            const cardWidth = cards[0].offsetWidth + 32; // width + gap
            
            // Create dots
            cards.forEach((_, index) => {
                const dot = document.createElement('div');
                dot.classList.add('dot');
                if (index === 0) dot.classList.add('active');
                dot.addEventListener('click', () => {
                    goToCard(index);
                });
                dotsContainer.appendChild(dot);
            });
            
            const dots = document.querySelectorAll('.dot');
            
            // Update active card and dots
            function updateActiveCard() {
                cards.forEach((card, index) => {
                    card.classList.toggle('active', index === currentIndex);
                });
                
                dots.forEach((dot, index) => {
                    dot.classList.toggle('active', index === currentIndex);
                });
                
                // Scroll to center the active card
                const scrollPosition = currentIndex * cardWidth - (carousel.offsetWidth / 2 - cardWidth / 2);
                carousel.scrollTo({
                    left: scrollPosition,
                    behavior: 'smooth'
                });
            }
            
            // Go to specific card
            function goToCard(index) {
                currentIndex = index;
                updateActiveCard();
                resetAutoScroll();
            }
            
            // Next card
            function nextCard() {
                currentIndex = (currentIndex + 1) % cards.length;
                updateActiveCard();
            }
            
            // Previous card
            function prevCard() {
                currentIndex = (currentIndex - 1 + cards.length) % cards.length;
                updateActiveCard();
            }
            
            // Auto-scroll functionality
            function startAutoScroll() {
                autoScrollInterval = setInterval(nextCard, 5000);
            }
            
            function resetAutoScroll() {
                clearInterval(autoScrollInterval);
                startAutoScroll();
            }
            
            // Event listeners
            prevBtn.addEventListener('click', () => {
                prevCard();
                resetAutoScroll();
            });
            
            nextBtn.addEventListener('click', () => {
                nextCard();
                resetAutoScroll();
            });
            
            // Handle keyboard navigation
            document.addEventListener('keydown', (e) => {
                if (e.key === 'ArrowLeft') {
                    prevCard();
                    resetAutoScroll();
                } else if (e.key === 'ArrowRight') {
                    nextCard();
                    resetAutoScroll();
                }
            });
            
            // Initialize
            startAutoScroll();
            
            // Handle responsive resize
            window.addEventListener('resize', () => {
                updateActiveCard();
            });
        });

We hope you Like this Post Thanks for coming Here

How to create a sliding testimonial section using html css

Post a Comment

tools grid

Getting Started with Flexbox: Easy Layouts with HTML and CSS - 09

simple URL Shortener Using HTML CSS & JAVASCRIPT

How to create a Stunning Personal Profile Card with Tables using HTML and CSS

Contact Form

How to create a sliding testimonial section using html css

You might like

Post a Comment

tools grid

Contact Form