Testimonial Slider Generator

<style>
.ts-container {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  background: #f8fafc;
  padding: 24px;
  border-radius: 12px;
  font-family: system-ui, sans-serif;
}
.ts-card { display: none; }
.ts-card.active { display: block; }
.ts-stars { color: #f59e0b; font-size: 19px; margin-bottom: 12px; }
.ts-quote {
  font-size: 15px;
  color: #1e293b;
  line-height: 1.6;
  margin: 0 0 16px;
  font-style: italic;
}
.ts-author { display: flex; align-items: center; gap: 12px; }
.ts-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ts-name { font-size: 14px; font-weight: 600; color: #1e293b; }
.ts-role { font-size: 12px; color: #1e293b; opacity: 0.6; }
.ts-nav { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.ts-dot {
  width: 8px; height: 8px; border-radius: 50%; border: none;
  background: #1e293b30; cursor: pointer; padding: 0;
}
.ts-dot.active { background: #f59e0b; }
.ts-arrows { display: flex; justify-content: space-between; position: absolute; top: 50%; left: 8px; right: 8px; transform: translateY(-50%); pointer-events: none; }
.ts-arrow {
  background: #ffffff; border: 1px solid #1e293b20; border-radius: 50%;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; pointer-events: auto; font-size: 14px; color: #1e293b;
}
</style>

<div class="ts-container">
    <div class="ts-card active">
      <div class="ts-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <p class="ts-quote">&ldquo;This tool saved me hours of work. Incredibly easy to use and the results look professional!&rdquo;</p>
      <div class="ts-author">
        
        <div>
          <div class="ts-name">Sarah Johnson</div>
          <div class="ts-role">Marketing Manager</div>
        </div>
      </div>
    </div>
    <div class="ts-card">
      <div class="ts-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <p class="ts-quote">&ldquo;I love how customizable everything is. Perfect for my client websites.&rdquo;</p>
      <div class="ts-author">
        
        <div>
          <div class="ts-name">Mike Chen</div>
          <div class="ts-role">Web Developer</div>
        </div>
      </div>
    </div>
    <div class="ts-card">
      <div class="ts-stars">&#9733;&#9733;&#9733;&#9733;&#9734;</div>
      <p class="ts-quote">&ldquo;The best free tool I've found for creating testimonial sections. Highly recommended!&rdquo;</p>
      <div class="ts-author">
        
        <div>
          <div class="ts-name">Emily Davis</div>
          <div class="ts-role">Small Business Owner</div>
        </div>
      </div>
    </div>
  <div class="ts-nav">
    <button class="ts-dot active"></button>
    <button class="ts-dot"></button>
    <button class="ts-dot"></button>
  </div>
  <div class="ts-arrows">
    <button class="ts-arrow ts-prev">&#10094;</button>
    <button class="ts-arrow ts-next">&#10095;</button>
  </div>
</div>

<script>
(function(){
  const cards = document.querySelectorAll(".ts-card");
  const dots = document.querySelectorAll(".ts-dot");
  let cur = 0;
  function show(i) {
    cards.forEach(c => c.classList.remove("active"));
    dots.forEach(d => d.classList.remove("active"));
    cur = (i + cards.length) % cards.length;
    cards[cur].classList.add("active");
    if(dots[cur]) dots[cur].classList.add("active");
  }
  document.querySelector(".ts-prev").addEventListener("click",()=>show(cur-1));
  document.querySelector(".ts-next").addEventListener("click",()=>show(cur+1));
  dots.forEach((d,i)=>d.addEventListener("click",()=>show(i)));
  setInterval(()=>show(cur+1),5000);
})();
</script>