Building a responsive testimonial carousel with HTML, CSS, and JavaScript

In today's world, websites are no longer static pages with basic text and images. Websites are now interactive and user-friendly, making them more accessible to users. One way to make your website more interactive is by adding a testimonial carousel. A testimonial carousel displays a collection of customer feedback in a responsive and attractive manner.

In this tutorial, we will learn how to build a responsive testimonial carousel with HTML, CSS, and JavaScript. The tutorial is divided into three sections:

1. HTML Markup
2. CSS Styling
3. JavaScript Functionality

Let's get started.

HTML Markup

The first step is to create the HTML markup for the testimonial carousel. We will create a container div that will hold all the testimonials. Each testimonial will be contained in a separate div.

<div class="testimonial-container">
  <div class="testimonial">
    <p>Testimonial Text</p>
    <h3>Customer Name</h3>
  </div>
  <div class="testimonial">
    <p>Testimonial Text</p>
    <h3>Customer Name</h3>
  </div>
  <div class="testimonial">
    <p>Testimonial Text</p>
    <h3>Customer Name</h3>
  </div>
</div>

The testimonial-container div will hold all the testimonials. The testimonial div will contain the actual testimonial text and the name of the customer.

CSS Styling

The next step is to style the testimonial carousel using CSS. We will use CSS to create a carousel effect that allows the user to scroll through the testimonials.

.testimonial-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 400px;
  overflow: hidden;
}

.testimonial {
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  margin: 0 15px;
  padding: 20px;
  text-align: center;
  width: 350px;
  height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.testimonial p {
  font-size: 20px;
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 20px;
}

.testimonial h3 {
  font-size: 24px;
  font-weight: 700;
  margin-top: 20px;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  color: #fff;
  font-size: 24px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

We will use flexbox to create a responsive layout that adjusts to the screen size. The testimonial-container div will be set to display: flex and flex-wrap: wrap, which allows the testimonials to wrap to the next line if the screen is too small.

The testimonial div will have a fixed width and height, with a background color, box shadow, border radius, and padding to make it more visually appealing. The testimonial div will also have display: flex, flex-direction: column, justify-content: center, and align-items: center to center the testimonial text and name of the customer vertically and horizontally.

To make the carousel effect, we will use overflow: hidden to hide the testimonials that are not currently displayed. We will use position: relative on the testimonial div to position the previous and next buttons on the testimonial.

We will also create previous and next buttons using the .prev and .next classes. The buttons will be positioned absolutely on top of the testimonial div using position: absolute, and will have a background color and border radius to make them more visually appealing.

JavaScript Functionality

The final step is to add JavaScript functionality to the testimonial carousel. We will use JavaScript to create a loop that allows the user to scroll through the testimonials.

const testimonials = document.querySelector('.testimonial-container');
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
let scrollPosition = 0;

prev.addEventListener('click', () => {
  testimonials.scrollLeft -= 350;
  scrollPosition -= 1;
  if (scrollPosition < 0) {
    scrollPosition = 2;
  }
});

next.addEventListener('click', () => {
  testimonials.scrollLeft += 350;
  scrollPosition += 1;
  if (scrollPosition > 2) {
    scrollPosition = 0;
  }
});

We will use the document.querySelector() method to select the testimonial-container div, and the previous and next buttons using the .prev and .next classes.

We will then create an event listener for the previous and next buttons using the addEventListener() method. When the user clicks the previous button, we will scroll the testimonials to the left using testimonials.scrollLeft -= 350, and decrease the scrollPosition variable by 1. We will also check if the scrollPosition is less than 0, and reset it to 2 to create a loop effect.

When the user clicks the next button, we will scroll the testimonials to the right using testimonials.scrollLeft += 350, and increase the scrollPosition variable by 1. We will also check if the scrollPosition is greater than 2, and reset it to 0 to create a loop effect.

And that's it! You have successfully created a responsive testimonial carousel with HTML, CSS, and JavaScript.

Conclusion

Testimonial carousels are a great way to showcase customer feedback on your website. They add interactivity and engagement to your website, making it more user-friendly. By following this tutorial, you can create a responsive testimonial carousel that adjusts to the screen size and allows the user to scroll through the testimonials using JavaScript. With some additional customization, you can make your testimonial carousel unique to your brand and visually appealing to your audience.