Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to create a review carousel using JavaScript ?

  • Difficulty Level : Medium
  • Last Updated : 12 Aug, 2021

In this article, we have created a review carousel using JavaScript. We have also used basic HTMM and CSS for styling. A carousel is basically a type of slideshow used to display images, text, or both in a cyclic manner. Review Carousel is used to display the reviews.

Approach: 

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • In the body tag, create a nested div tag with 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.



 

index.html




<div class="review">
    <div class="review__items">
        <img src=
        <h1>GeeksforGeeks</h1>
  
        <p>
            Let's learn to create a review 
            carousel using JavaScript.
        </p>
    </div>
  
    <div class="review__items">
        <img src=
        <h1>Geek Here</h1>
  
        <p>
            Very useful site to learn cool 
            stuff. Improve your skills
        </p>
    </div>
  
    <div class="review__items">
        <img src=
        <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>

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.

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;
}

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.



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";
}

To display the specified index, first, it will hide all reviews by setting their display to none using a simple for loop, and for a specific index, it will display information by setting its display to block. 

Note: Conditional statements are responsible for the cyclic way of the carousel, if the parameter is negative it will set the parameter to the last index, and if the parameter is greater than or equal to the last index it will set the parameter to the first index.

perviousReview function: This function will be executed when the previous button is clicked, it decreases the variable by 1, then it will be passed to the carousel function.

function previousReview() {
    rev = rev - 1;
    carousel(rev);
}

nextReview function: This function will be executed when the next button is clicked, it increases the variable by 1, then it will be passed to the carousel function.

function nextReview() {
    rev = rev + 1;
    carousel(rev);
}

Complete Code:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Review Carousel</title>
  
    <style>
        .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;
        }
    </style>
</head>
  
<body>
    <div class="review">
        <div class="review__items">
            <img src=
            <h1>GeeksforGeeks</h1>
            <p>
                Let's learn to create a review 
                carousel using JavaScript.
            </p>
  
        </div>
  
        <div class="review__items">
            <img src=
            <h1>Geek Here</h1>
            <p>
                Very useful site to learn cool 
                stuff. Improve your skills.
            </p>
  
        </div>
  
        <div class="review__items">
            <img src=
            <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>
        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";
        }
    </script>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :