Create a review carousel using JavaScript

Last Updated : 09 Dec, 2025

A review carousel allows users to view one review at a time by navigating through previous and next buttons. We create a simple review carousel using HTML, CSS, and JavaScript to control the slide transitions and display each review interactively.

Approach:

In the body tag, create a nested div tag with a class name containing the reviewer image, name, and text.
Add previous and next buttons to check previous and next reviews, respectively.
For styling, add some CSS properties in the style tag like alignment, font size, padding, margin, etc.
Create a function using JavaScript in the script tag to display only one review at a time.

Example: Create a review carousel using the above approach.

HTML Code: As in the first two steps, we will create a nested div tag and two buttons in the body tag.

Note: In the button tag, we have specified an attribute onclick. The onclick event attribute works when the user clicks the button. It will execute the function when the button is clicked.

CSS code: For styling, we have used CSS properties.

Note: We can also create another file for styling or we can add them in the same HTML file under the style tag.

Now, to display only one review at a time we will create some functions in JavaScript.

Carousel function: This function gets all the elements using the specified class name as an object with the help of the getElementsByClassName() method. These objects can be accessed by the index of the elements. This function receives a parameter, which is the index of the element it will display.

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="review">
        <div class="review__items">
            <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
            <h1>GeeksforGeeks</h1>
            <p>Let's learn to create a review carousel using JavaScript.</p>
        </div>
        <div class="review__items">
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png" />
            <h1>Geek Here</h1>
            <p>Very useful site to learn cool stuff. Improve your skills.</p>
        </div>
        <div class="review__items">
            <img src="https://media.geeksforgeeks.org/img-practice/courses/GfG_Logo.png" />
            <h1>Hello there!</h1>
            <p>Have a nice day, please visit us again. Nice to meet you.</p>
        </div>
        <div class="review__button">
            <button id="prev" onclick="previousReview()">PREV</button>
            <button id="next" onclick="nextReview()">NEXT</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

style.css

        .review {
            width: 300px;
            margin: 20px auto;
            text-align: center;
            border: 1px solid #ccc;
            padding: 16px;
            border-radius: 8px;
        }
        .review__items {
            display: none;
        }
        .review__items img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
        }
        .review__button {
            margin-top: 12px;
        }
        .review__button button {
            padding: 6px 12px;
            margin: 0 4px;
            cursor: pointer;
        }

script.js

        let currentIndex = 0;

        function showReview(index) {
            const items = document.getElementsByClassName("review__items");

            if (items.length === 0) return;

            if (index >= items.length) index = 0;
            if (index < 0) index = items.length - 1;

            for (let i = 0; i < items.length; i++) {
                items[i].style.display = (i === index) ? "block" : "none";
            }

            currentIndex = index;
        }

        function nextReview() {
            showReview(currentIndex + 1);
        }

        function previousReview() {
            showReview(currentIndex - 1);
        }

        window.onload = function () {
            showReview(0);
        };