Testimonial Slider Generator

Style

Behavior

Live Preview

<!-- Testimonial Slider -->
<style>
.sqs-ts{position:relative;background:#f7f6f2;padding:40px 20px;overflow:hidden;font-family:sans-serif;}
.sqs-ts-slide{display:none;background:#fff;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,0.08);padding:32px;}
.sqs-ts-slide.active{display:block;animation:sqs-ts-fade .4s ease;}
@keyframes sqs-ts-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.sqs-ts-stars{color:#f4b400;font-size:18px;margin-bottom:12px;letter-spacing:2px;}
.sqs-ts-quote{font-size:16px;line-height:1.7;color:#333;margin:0 0 16px;}
.sqs-ts-name{font-size:14px;font-weight:600;color:#111;margin:0 0 4px;}
.sqs-ts-title{font-size:13px;color:#888;margin:0;}
.sqs-ts-dots{display:flex;justify-content:center;gap:8px;margin-top:20px;}
.sqs-ts-dot{width:10px;height:10px;border-radius:50%;background:#ccc;border:none;cursor:pointer;padding:0;transition:background .2s;}
.sqs-ts-dot.active{background:#333;}
.sqs-ts-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.9);border:1px solid #ddd;width:36px;height:36px;border-radius:50%;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#333;transition:background .2s;}
.sqs-ts-arrow:hover{background:#fff;}
.sqs-ts-prev{left:8px;}
.sqs-ts-next{right:8px;}
</style>

<div class="sqs-ts" id="sqsTestimonialSlider">
  <div class="sqs-ts-slide active" data-index="0">
    <div class="sqs-ts-stars">★★★★★</div>
    <blockquote class="sqs-ts-quote">&ldquo;This completely transformed our website. The design went from basic to professional in a single afternoon.&rdquo;</blockquote>
    <p class="sqs-ts-name">Sarah Johnson</p>
    <p class="sqs-ts-title">Founder, Bloom Studio</p>
  </div>
  <div class="sqs-ts-slide" data-index="1">
    <div class="sqs-ts-stars">★★★★★</div>
    <blockquote class="sqs-ts-quote">&ldquo;We saw a 40% increase in conversions after redesigning with these tools. Highly recommend.&rdquo;</blockquote>
    <p class="sqs-ts-name">Mike Chen</p>
    <p class="sqs-ts-title">Marketing Director, TechFlow</p>
  </div>
  <div class="sqs-ts-slide" data-index="2">
    <div class="sqs-ts-stars">★★★★☆</div>
    <blockquote class="sqs-ts-quote">&ldquo;Clean, modern, and easy to customize. Exactly what we needed for our rebrand.&rdquo;</blockquote>
    <p class="sqs-ts-name">Emily Rodriguez</p>
    <p class="sqs-ts-title">CEO, Verde Creative</p>
  </div>
  <div class="sqs-ts-dots">
    <button class="sqs-ts-dot active" data-index="0"></button>
    <button class="sqs-ts-dot" data-index="1"></button>
    <button class="sqs-ts-dot" data-index="2"></button>
  </div>
  <button class="sqs-ts-arrow sqs-ts-prev">&lsaquo;</button>
  <button class="sqs-ts-arrow sqs-ts-next">&rsaquo;</button>
</div>

<script>
(function(){
  var container = document.getElementById("sqsTestimonialSlider");
  var slides = container.querySelectorAll(".sqs-ts-slide");
  var dots = container.querySelectorAll(".sqs-ts-dot");
  var current = 0;
  function show(i){
    slides.forEach(function(s){s.classList.remove("active");});
    dots.forEach(function(d){d.classList.remove("active");});
    slides[i].classList.add("active");
    if(dots[i]) dots[i].classList.add("active");
    current = i;
  }
  dots.forEach(function(d,i){d.addEventListener("click",function(){show(i);});});
  var prev = container.querySelector(".sqs-ts-prev");
  var next = container.querySelector(".sqs-ts-next");
  if(prev) prev.addEventListener("click",function(){show((current-1+slides.length)%slides.length);});
  if(next) next.addEventListener("click",function(){show((current+1)%slides.length);});
  setInterval(function(){show((current+1)%slides.length);},5000);
})();
</script>