Carousel: How to create a testimonial carousel with HTML, CSS, and Javascript.

Introduction

When developing web applications, one of the most crucial considerations for developers is responsiveness and interactivity. I have some exciting news for you: the carousel is one of the ways we can make our site appear spectacular.

What is a carousel

A carousel is a round platform containing model horses, cars, and other items that revolves around that children ride on at a funfair.

In the context of web development, a carousel is a multi-content format used to display photographs, videos, customer testimonials, and other content. Carousels allow you to display several photos, videos, or a combination of images and text in a single container block and provide navigation buttons for moving forward and backward, resulting in an engaging experience.
The excitement that children have when riding on a merry-go-round can be compared to the joy that our website visitors experience when they encounter interactive features such as a carousel on our website or web application.

Prerequisites

Knowledge of HTML
Knowledge of CSS
Knowledge of Javascript

HTML Setup: Building the foundation

The initial step in this process is to create our HTML fragment for this project. Once we've finished creating our HTML boilerplate, the next step is to connect our document to our CSS and Script files. Once that's done, we're ready to go.

Creating our carousel

Once your external files have been properly linked. We may now proceed to develop an HTML carousel. To accomplish this, we will create the carousel parent container and give it the class name carousel__container. We'll have four user testimonials in our carousel container, each with the class name carousel__item associated to it. The initial carousel item will additionally have the class carousel__item—selected assigned to it. Its new class will allow us to switch between chosen carousel items.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testimonial carousel</title>
    <link rel="stylesheet" href="post.css">
    <script src="./post.js" defer></script>
</head>
<body>
    <aside class="testimonials">
        <h2 class="testimonials__head">What they've said</h2>
        <div class="carousel__container">
          <div class="carousel__item carousel__item--selected">
            <img
              src="./images/avatar-anisha.png"
              alt="user__avatar"
              srcset=""
            />
            <div class="testimonial__block">
              <h4 class="name">Anisha Li</h4>
              <p class="testimonial__paragraph">
                “Manage has supercharged our team’s workflow. The ability to
                maintain visibility on larger milestones at all times keeps
                everyone motivated.”
              </p>
            </div>
          </div>

          <div class="carousel__item ">
            <img src="./images/avatar-ali.png" alt="user__avatar" srcset="" />
            <div class="testimonial__block">
              <h4 class="name">Ali Bravo</h4>
              <p class="testimonial__paragraph">
                “We have been able to cancel so many other subscriptions since
                using Manage. There is no more cross-channel confusion and
                everyone is much more focused.”
              </p>
            </div>
          </div>

          <div class="carousel__item">
            <img
              src="./images/avatar-richard.png"
              alt="user__avatar"
              srcset=""
            />
            <div class="testimonial__block">
              <h4 class="name">Richard Watts</h4>
              <p class="testimonial__paragraph">
                “Manage allows us to provide structure and process. It keeps us
                organized and focused. I can’t stop recommending them to
                everyone I talk to!”
              </p>
            </div>
          </div>

          <div class="carousel__item">
            <img
              src="./images/avatar-shanai.png"
              alt="user__avatar"
              srcset=""
            />
            <div class="testimonial__block">
              <h4 class="name">Shanai Gough</h4>
              <p class="testimonial__paragraph">
                “Their software allows us to track, manage and collaborate on
                our projects from anywhere. It keeps the whole team in-sync
                without being intrusive.”
              </p>
            </div>
          </div>
      </aside>
</body>
</html>

I know you're wondering where the button that allows us to switch between carousel items is; don't worry, this will be implemented utilizing our javascript.

CSS: Styling carousel

@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;700&display=swap");

:root {
  --bright-red: hsl(12, 88%, 59%);
  --dark-blue: hsl(228, 39%, 23%);
  --dark-grayish-blue: hsl(227, 12%, 61%);
  --very-dark-blue: hsl(233, 12%, 13%);
  --very-pale-red: hsl(13, 100%, 96%);
  --very-light-grey: hsl(0, 0%, 98%);
  --font-vietnam: "Be Vietnam Pro";
}

*,
::before,
::after {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

body {
  font-size: 0.875rem;
  background-color: var(--very-pale-red);
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: var(--font-vietnam);
}

img {
  max-width: 100%;
}

.testimonials {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  place-items: center;
}

.testimonials__head {
  font-size: 2.3em;
  padding: 2rem 0;
  color: var(--dark-blue);
}

.carousel__container {
  position: relative;
  padding: 2rem;
}

.carousel__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 2rem 0 4rem 0;
  position: relative;
  display: none;
}

.carousel__item--selected {
  display: flex;
}

img[alt="user__avatar"] {
  width: 25%;
  position: absolute;
  top: -30px;
}

.testimonial__block {
  background: var(--very-light-grey);
  padding: 5rem 1.5rem 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.name {
  font-size: 1.2em;
  color: var(--dark-blue);
}

.testimonial__paragraph {
  font-size: 1em;
  text-align: center;
  line-height: 1.7rem;
  padding: 1rem 0;
  color: var(--dark-grayish-blue);
}

.carousel__nav {
  width: 100%;
  padding: 20px 0;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
}

.carousel__btn {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  border: 1.5px solid var(--bright-red);
  background: transparent;
  cursor: pointer;
  margin: 0 5px;
  transition: 0.5s ease-in;
}

.carousel__btn--selected {
  background-color: var(--bright-red);
}

.carousel__action__btn {
  color: white;
  background-color: var(--bright-red);
  margin: 2rem 0;
  padding: 1rem 2.5rem;
  outline: none;
  border: none;
  border-radius: 2rem;
  cursor: pointer;
  box-shadow: 1px 10px 6px var(--very-pale-red);
}

@media (500px <= width <= 915px) {
  body {
    font-size: 0.9375rem;
  }

  .carousel__container {
    padding: 2rem 8rem;
  }

  img[alt="user__avatar"] {
    bottom: 2rem;
    width: 20%;
  }

  .testimonial__block {
    padding: 6rem 1.5rem 1rem 1.5rem;
  }
}

@media (width >= 916px) {
    body{
        font-size: 1.1rem;
    }

  .testimonials {
    margin: 5rem auto;
    max-width: 50%;
  }

  img[alt="user__avatar"] {
    width: 15%;
  }

  .testimonial__block {
    padding: 6rem 3rem 3rem 3rem;
    width: 100%;
  }
}

@media(width >= 1500px ){
  .testimonials {
    margin: 5rem auto;
    max-width: 30%;
  }

}

I'll do a good job of explaining some of the styling in our cascading style sheet (CSS). Take note we used a Mobile First approach in the styling.

carousel__container: We gave the carousel container a relative position, which is critical for stacking carousel items.
carousel__item: We also provided our carousel item a display none, of which hides the items. We did this because we wanted the selected carousel item to be visible.
carousel__item__selected: This is where the class "carousel__item-selected" comes in, which has now been allocated the display flex attribute. After doing so, the carousel item with this class will be presented in view.

We also added the classes carousel__nav, carousel__btn, and carousel__btn-selected to assist us in distinguishing between the buttons that are selected and those that are not. Remember that our JavaScript will construct these button elements.

JavaScript: Bring it to life

You are welcome to where the magic happens, and I hope you have had a good time so far.

document.querySelectorAll(".carousel__container").forEach((carousel) => {
    const items = carousel.querySelectorAll(".carousel__item");
    const buttonHtml = Array.from(items, () => {
      return `<span class="carousel__btn"></span>`;
    });
    carousel.insertAdjacentHTML(
      "beforeend",
      `<div class="carousel__nav">${buttonHtml.join("")}</div>`
    );

    const carouselBtns = carousel.querySelectorAll(".carousel__btn");

    carouselBtns.forEach((carouselBtn, i) => {
      carouselBtn.addEventListener("click", () => {
        // un-select all the items
        items.forEach((item) =>
          item.classList.remove("carousel__item--selected")
        );
        carouselBtns.forEach((carouselBtn) =>
          carouselBtn.classList.remove("carousel__btn--selected")
        );

        items[i].classList.add("carousel__item--selected");
        carouselBtn.classList.add("carousel__btn--selected");
      });
    });
  });

I'm going to go over the JavaScript code we just wrote in detail so we can understand exactly what we're doing.

Using document.querySelector , we selected every item in our carousel, the method returns a nodeList, which we now loop through to loop over each of the items in the carousel__container using forEach(). It is worth noting that in our forEach() method, the term carousel that is found inside the parentheses symbolizes each item in the carousel__container. Following that, we store each of these items in a variable called items, specifying that items should be the variable that represents our carousel__item; in essence, the items variable now returns an array.

Next, we made a variable called buttonHtml and used the Array.from() method to construct an array of buttons tied to each item, giving it the class carousel__btn. We needed to include this navigation in our carousel__container, so we used the insertAdjacentHTML method to create a div with the class carousel__nav. Then, in the div, we used the .join() method to add each of the buttons we made in the carousel__nav section.

We must make our buttons react to click events. If you look in your browser, you will notice buttons that have been stylized; this style was derived from the class name of our CSS file. We made a variable called CarouselBtns and saved all of our buttons in it.

We used the forEach() loop to go through each of the buttons because the carouselBtns variable returns an array in the pretenses we named each of the buttons carouselBtn and the i signifies their index. We provided a click eventListener to each button within the forEach() method code block.

Following that, we took the items variable and looped through it with the forEach() method to see if the class name carousel__item—selected had been added and then removed it. We also used the forEach() method on the corouselBtns to remove the class name carousel__btn—selected if it had been added.

Finally, we removed the selected class if it was present. The next step is to add those classes to both the carouselBtn and the items using the items index.

Links

Testimonial Carousel Live Preview

Code GitHub Repository

Conclusion

Congrats!!!!!!
You have successfully created a carousel; I recommend that we go read up on some of the principles used in this implementation, particularly some of the JavaScript methods and functions.

Buy me a coffee☕

You can show your appreciation for me by purchasing me a cup of coffee if you enjoyed and found value in my article.

Buy me a cofee

You should also like and follow for more stuff. Also, given this is my first technical article, please provide comments if you have any queries or see any errors.