Creating a responsive testimonial rotator with HTML, CSS, and JavaScript

Testimonials are an important aspect of any website that wants to gain the trust of potential customers. They help build social proof and provide valuable feedback to the business. However, displaying testimonials on a website can be challenging, especially when you have a lot of them to showcase. That's where a responsive testimonial rotator comes in handy.

In this tutorial, we'll show you how to create a responsive testimonial rotator using HTML, CSS, and JavaScript. This testimonial rotator will allow you to display multiple testimonials on a single page and will automatically rotate through them.

HTML Structure

We'll start by creating the HTML structure for our testimonial rotator. We'll use a div with a class of testimonial-slider to contain our testimonials. Each testimonial will be wrapped in a div with a class of testimonial. Inside each testimonial, we'll have two elements: the quote and the author.

Here's what the HTML structure looks like:

<div class="testimonial-slider">
  <div class="testimonial">
    <blockquote>
      <p>Here's what some of our satisfied customers have to say:</p>
      <p>Great service! They really helped me out of a bind.</p>
    </blockquote>
    <cite>- John Smith</cite>
  </div>
  <div class="testimonial">
    <blockquote>
      <p>Amazing company! Their products are top-notch.</p>
    </blockquote>
    <cite>- Jane Doe</cite>
  </div>
  <div class="testimonial">
    <blockquote>
      <p>I would recommend this company to anyone looking for quality service.</p>
    </blockquote>
    <cite>- Tom Johnson</cite>
  </div>
</div>

CSS Styling

Now that we have our HTML structure in place, let's add some CSS to make it look good. We'll start by styling the testimonial-slider container. We'll give it a width of 80% and center it on the page using margin: 0 auto. We'll also add some padding to the top and bottom of the container.

.testimonial-slider {
  width: 80%;
  margin: 0 auto;
  padding: 50px 0;
}

Next, we'll style the testimonial class. We'll give it a width of 100% so that each testimonial takes up the entire width of the container. We'll also add some margin between each testimonial using margin-bottom.

.testimonial {
  width: 100%;
  margin-bottom: 50px;
}

Finally, we'll style the blockquote and cite elements. We'll add some margin to the top and bottom of the blockquote and change the font-size and color of the cite element.

blockquote {
  margin: 0;
  margin-bottom: 10px;
}

cite {
  font-size: 1.2em;
  color: #666;
}

JavaScript Functionality

Now that we have our HTML and CSS in place, let's add some JavaScript to make our testimonial rotator functional. We'll start by creating a variable to store all of our testimonials.

const testimonials = document.querySelectorAll('.testimonial');

Next, we'll create a variable to keep track of the current testimonial index and set it to 0.

let testimonialIndex = 0;

We'll also create a function to hide all of our testimonials except for the current one.

function hideTestimonials() {
  for (let i = 0; i < testimonials.length; i++) {
    testimonials[i].style.display = "none";
  }
}

Now, let's create a function to display the current testimonial. We'll set the display property of the current testimonial to 'block'.

function showTestimonial() {
  hideTestimonials();
  testimonials[testimonialIndex].style.display = 'block';
}

Next, we'll create a function to rotate the testimonials. This function will increment the testimonialIndex variable and call the showTestimonial function.

function rotateTestimonials() {
  testimonialIndex++;
  if (testimonialIndex >= testimonials.length) {
    testimonialIndex = 0;
  }
  showTestimonial();
}

Finally, we'll create an interval to automatically rotate through the testimonials. We'll set the interval to 5000ms (5 seconds).

setInterval(rotateTestimonials, 5000);

Conclusion

And there you have it! You now know how to create a responsive testimonial rotator using HTML, CSS, and JavaScript. With this testimonial rotator, you can display multiple testimonials on a single page and have them automatically rotate through. You can customize the styling to match your website's design and even add additional functionality if needed. We hope this tutorial was helpful and happy coding!