Mbiakop Clinton's blog

Creating an image carousel with HTML, CSS, and Javascript

Mbiakop Clinton's photo
Mbiakop Clinton
·

5 min read

How to make a carousel in JavaScript?

In this article, we shall create a review carousel using JavaScript. That’s the basic HTML, CSS, and JavaScript. We’ll keep the HTML fairly simple. We basically need a container for the carousel We won’t focus very much on the HTML head or anything other than the carousel. We also used basic HTML and CSS for styling. A carousel is basically a type of slideshow used to display images, text, or both cyclically. The review carousel is used to display reviews.

Approach: Inside the body tag, create a nested div tag with a class name containing the reviewer's image, name, and text. Add previous and next buttons to check previous and next reviews respectively. Add CSS properties in the style tag for styling 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 inside the body tag.

image.html

<div class="review">
    <div class="review__items">
        <img src=
"https://www.mbiakopclinton.com/wp-content/uploads/2022/09/markus-winkler-Kn_l9o5220Y-unsplash-1536x1024.jpg" />
        <h1>Hello world</h1>

        <p>
            Let's learn to create a review 
            carousel using JavaScript.
        </p>
    </div>

    <div class="review__items">
        <img src=
"https://www.mbiakopclinton.com/wp-content/uploads/2022/09/Object-Oriented-Programing-in-JavaScript-300x207.png" />
        <h1>Learn Here</h1>

        <p>
            Very useful site to learn cool 
            stuff. Improve your skills
        </p>
    </div>

    <div class="review__items">
        <img src=
"https://www.mbiakopclinton.com/wp-content/uploads/2022/09/oop-in-python-1.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 specified an onclick attribute. 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 used CSS properties.

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

Also, for the code above we shall have the output displayed as followed

Note: We can also create another file for the style 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 functions in JavaScript.

This function gets all elements using the specified class name as an object using the getElementsByClassName() method. These objects are accessible through the element index. This function receives one parameter, 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 notices by setting its display to none using a simple for loop, and for a specific index, it will display the 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 decrements the variable by 1, then it will be passed to the carousel function.

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

also, we have the nextReview function;

nextReview function:

This function will be executed when the next button is clicked, it will increase 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:grey;
            height: auto;
            width: 400px;
            border-radius: 15px;
            margin: auto;
            padding: 10px;
            margin-top: 30px;
            box-shadow: 5px 5px 5px grey;
            align-items: center;
        }

        .review__items {
            align-items: center;
            justify-content: space-evenly;
            width: 380px;
            padding: 10px;
            align-items: center;
        }

        .review__items img {
            height: 250px;
            width: 380px;
            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: rgb(17, 17, 17);
            font-weight: bold;
        }

        .review__items {
            display: none;
        }
    </style>
</head>

<body>
    <div class="review">
        <div class="review__items">
            <img src=
"https://www.mbiakopclinton.com/wp-content/uploads/2022/08/images-2.jpg" />
            <h1>HelloWorld</h1>
            <p>
                Let's learn to create a review 
                carousel using JavaScript.
            </p>

        </div>

        <div class="review__items">
            <img src=
"https://www.mbiakopclinton.com/wp-content/uploads/2022/09/Object-Oriented-Programing-in-JavaScript-300x207.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://www.mbiakopclinton.com/wp-content/uploads/2022/09/oop-in-python-1.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>

RESULT

OOP.gif

JavaScriptHTMLCSSsoftware developmentWeb Design