How to create a review carousel using JavaScript ?

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: 
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="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>
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="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>        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:
CSS-Properties
CSS-Questions
HTML-Questions
javascript-functions
JavaScript-Questions
Picked
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Form validation using jQuery
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS