About this snippet

Build trust with this auto-playing testimonial slider. The JavaScript handles the timing and fade transitions smoothly, yet pauses when the user hovers over the content to let them read at their own pace.

Size
2.8 KB
Uses
HTML, CSS, JavaScript
Loads
Nothing external
Views
313
<div class="testimonial-slider">
  <div class="slide-track">
    <div class="t-slide active">
      <p>"The best service I have ever used. Highly recommended!"</p>
      <div class="author">- Sarah Jenkins</div>
    </div>
    <div class="t-slide">
      <p>"A game changer for our business workflow. Simply amazing."</p>
      <div class="author">- Mike Ross</div>
    </div>
    <div class="t-slide">
      <p>"Customer support is top-notch and the design is beautiful."</p>
      <div class="author">- Amanda Lee</div>
    </div>
  </div>
  <div class="indicators">
    <span class="dot active" onclick="goToSlide(0)"></span>
    <span class="dot" onclick="goToSlide(1)"></span>
    <span class="dot" onclick="goToSlide(2)"></span>
  </div>
</div>
.testimonial-slider {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  max-width: 600px;
  margin: 0 auto;
  background: #1f2937;
  color: white;
  padding: 40px;
  border-radius: 20px;
  text-align: center;
  position: relative;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.t-slide {
  display: none;
  animation: fade 0.5s ease-in-out;
}
.t-slide.active {
  display: block;
}
.t-slide p {
  font-size: 1.25rem;
  font-style: italic;
  margin-bottom: 20px;
  line-height: 1.5;
}
.author {
  color: #9ca3af;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
}
.dot {
  width: 10px;
  height: 10px;
  background: #374151;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}
.dot.active {
  background: #3b82f6;
}
@keyframes fade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
let currentIndex = 0;
const slides = document.querySelectorAll(".t-slide");
const dots = document.querySelectorAll(".dot");
let interval;

function showSlide(index) {
  slides.forEach((slide, i) => {
    slide.classList.remove("active");
    dots[i].classList.remove("active");
    if (i === index) {
      slide.classList.add("active");
      dots[i].classList.add("active");
    }
  });
}

function nextSlide() {
  currentIndex = (currentIndex + 1) % slides.length;
  showSlide(currentIndex);
}

function goToSlide(index) {
  currentIndex = index;
  showSlide(currentIndex);
  resetTimer();
}

function resetTimer() {
  clearInterval(interval);
  interval = setInterval(nextSlide, 4000);
}

// Start Auto Play
resetTimer();

// Pause on hover
document.querySelector(".testimonial-slider").addEventListener("mouseenter", () => clearInterval(interval));
document.querySelector(".testimonial-slider").addEventListener("mouseleave", resetTimer);
Esc
↑↓ moveEnter select

Start from a template

Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

Share

Source

Keyboard shortcuts

Save