Carousel: How to create a testimonial carousel with HTML, CSS, and Javascript.
Tags: javascript, html, css, webdev
Published: 2023-07-24 12:52:30

## 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.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/wJQF23Gt0eEMS2Zcbb/giphy.gif">

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.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/YHvwPgwojjsFa/giphy.gif">


### 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 c`orouselBtns` 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](https://testimonial-carousel-nine.vercel.app/)

[Code GitHub Repository](https://github.com/Ediomojose/Testimonial-Carousel)


## 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](https://www.buymeacoffee.com/ediomojose)

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.