How to Add Testimonials using HTML?

Last Updated : 25 Jul, 2024

Testimonials are Written recommendations from users and are often seen in a separate section of a web page. In this article, we will learn how to add responsive testimonials to our web page. Generally, a testimonial contains the user’s name, picture, his/her identity(optional), and most importantly his/her quoted text.

Approach

We will begin by creating a basic HTML structure for our carousel. This structure will include a main container that houses the carousel itself and navigation buttons. The carousel will be designed to display testimonials dynamically.
For styling, we'll use CSS to create an appealing and responsive design. The carousel will be centered on the page, and we'll employ flexbox to enable smooth horizontal scrolling of testimonials.
Each testimonial will be styled as a card-like element, containing an avatar image, the name of the person providing the testimonial, and their message.
To ensure responsiveness, we'll implement media queries in our CSS. For screens narrower than 768px, the carousel will display a single testimonial at a time.
On wider screens, it will showcase three testimonials side by side, with the center one enlarged and fully opaque, while the side testimonials are slightly scaled down and semi-transparent.
The JavaScript portion of our code will handle the dynamic functionality of the carousel. We'll start by defining an array of testimonial objects, each containing a name and text.
We'll then create functions to generate HTML elements for each testimonial, update the carousel display based on the current index, and manage navigation through the testimonials.
Our code will include event listeners for the navigation buttons and for window resizing. This will allow users to manually cycle through testimonials and ensure that the carousel adapts appropriately when the screen size changes.
Lastly, we'll include an option for auto-scrolling through the testimonials, which can be easily enabled or disabled by uncommenting a single line of code.

Example: In this Example, we will use the above discussed approach.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Circular Testimonial Carousel</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="carousel-container">
        <div class="carousel">
            <!-- Testimonials will be dynamically added here -->
        </div>
        <button class="nav-button prev">&#8249;</button>
        <button class="nav-button next">&#8250;</button>
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS

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

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
}

.carousel-container {
    width: 90%;
    max-width: 1200px;
    overflow: hidden;
    position: relative;
}

.carousel {
    display: flex;
    transition: transform 0.5s ease;
}

.testimonial {
    flex: 0 0 100%;
    padding: 40px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    margin: 0 10px;
    transition: all 0.3s ease;
}

.testimonial img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 20px;
    object-fit: cover;
}

.testimonial h3 {
    margin-bottom: 10px;
    color: #333;
    font-size: 1.4em;
}

.testimonial p {
    font-size: 1em;
    color: #666;
    line-height: 1.6;
}

.nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255,255,255,0.8);
    border: none;
    font-size: 24px;
    padding: 15px;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    z-index: 10;
}

.nav-button:hover {
    background-color: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.prev {
    left: 20px;
}

.next {
    right: 20px;
}

@media (min-width: 768px) {
    .carousel {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .testimonial {
        flex: 0 0 calc(33.333% - 20px);
        transform: scale(0.8);
        opacity: 0.7;
        transition: all 0.5s ease;
    }

    .testimonial.active {
        transform: scale(1.1);
        opacity: 1;
        z-index: 1;
    }
}

JavaScript

const carousel = document.querySelector('.carousel');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');

const testimonials = [
    {
        name: "John Doe",
        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    },
    {
        name: "Jane Smith",
        text: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    },
    {
        name: "Bob Johnson",
        text: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
    },
    {
        name: "Alice Brown",
        text: "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    },
    {
        name: "Charlie Davis",
        text: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
    }
];

let currentIndex = 0;

function createTestimonialElement(testimonial, index) {
    const div = document.createElement('div');
    div.className = 'testimonial';
    div.innerHTML = `
        <img src="https://picsum.photos/80?random=${index}" alt="${testimonial.name}">
        <h3>${testimonial.name}</h3>
        <p>${testimonial.text}</p>
    `;
    return div;
}

function updateCarousel() {
    carousel.innerHTML = '';
    const isMobile = window.innerWidth < 768;

    if (isMobile) {
        carousel.appendChild(createTestimonialElement(testimonials[currentIndex], currentIndex));
    } else {
        const prevIndex = (currentIndex - 1 + testimonials.length) % testimonials.length;
        const nextIndex = (currentIndex + 1) % testimonials.length;

        carousel.appendChild(createTestimonialElement(testimonials[prevIndex], prevIndex));
        const activeTestimonial = createTestimonialElement(testimonials[currentIndex], currentIndex);
        activeTestimonial.classList.add('active');
        carousel.appendChild(activeTestimonial);
        carousel.appendChild(createTestimonialElement(testimonials[nextIndex], nextIndex));
    }
}

function showNext() {
    currentIndex = (currentIndex + 1) % testimonials.length;
    updateCarousel();
}

function showPrev() {
    currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length;
    updateCarousel();
}

nextBtn.addEventListener('click', showNext);
prevBtn.addEventListener('click', showPrev);

// Responsive behavior
function handleResize() {
    updateCarousel();
}

window.addEventListener('resize', handleResize);

// Initial setup
updateCarousel();

// Auto-scroll (optional)
// setInterval(showNext, 5000);

Output:

How to Add a Short Quotation using HTML?

argha_c14

Improve

Article Tags :

How to Add Testimonials using HTML?

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?