How to create a review carousel using JavaScript ?

Last Updated : 02 Jun, 2023

In this article, we have created a review carousel using JavaScript. We have also used basic HTML and CSS for styling. The JavaScript carousel is a slideshow component that cycles through a set of images or content. It uses JavaScript to control the transitions and user interactions, providing an interactive and dynamic experience. Review Carousel is used to display the reviews.

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 lang="en">
<head>
       <title>review carousel using JavaScript</title>
       <link rel="stylesheet" href="style.css">
       <script src="script.js"></script>
</head>
 
<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>
</html>

CSS

/* filename: style.css */
.review {
    background: rgb(145, 226, 188);
    height: auto;
    width: 270px;
    border-radius: 15px;
    margin: auto;
    padding: 10px;
    margin-top: 30px;
    box-shadow: 5px 5px 5px #32917d;
    align-items: center;
}
 
.review__items {
    align-items: center;
    justify-content: space-evenly;
    width: 250px;
    padding: 10px;
    align-items: center;
}
 
.review__items img {
    height: 250px;
    width: 250px;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 4px 15px;
}
 
.review__items h1 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 20px;
}
 
.review__items p {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 14px;
}
 
.review__button {
    text-align: center;
    padding: 10px;
}
 
.review__button button {
    color: rgb(192, 229, 192);
    background: green;
    font-weight: bold;
}
 
.review__items {
    display: none;
}

Javascript

//Filename: script.js
let rev = 0;
carousel(rev);
 
function previousReview() {
    rev = rev - 1;
    carousel(rev);
}
 
function nextReview() {
    rev = rev + 1;
    carousel(rev);
}
 
function carousel(review) {
    let reviews = document.getElementsByClassName("review__items");
 
    if (review >= reviews.length) {
        review = 0;
        rev = 0;
    }
    if (review < 0) {
        review = reviews.length - 1;
        rev = reviews.length - 1;
    }
    for (let i = 0; i < reviews.length; i++) {
        reviews[i].style.display = "none";
    }
    reviews[review].style.display = "block";
}