Testimonial Slider
Home
Snippets
Testimonial Slider
HTML
CSS
JS
<div class="slider"> <div class="testimonial active"> <p>"This company built our website and it looks amazing! Highly recommend."</p> <div class="author"> Sarah M.</div> </div> <div class="testimonial"> <p>"Fantastic SEO services. Our traffic has doubled in just 3 months!"</p> <div class="author"> John D.</div> </div> <div class="testimonial"> <p>"Creative designs and great communication throughout the project."</p> <div class="author"> Emily R.</div> </div> <div class="dots"> <span class="dot active"></span> <span class="dot"></span> <span class="dot"></span> </div> </div>
body { height: 100vh; margin: 0; font-family: Arial, sans-serif; background: #f4f4f9; display: flex; justify-content: center; align-items: center; } .slider { width: 350px; background: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); text-align: center; position: relative; } .testimonial { display: none; } .testimonial.active { display: block; animation: fade 0.6s ease-in-out; } @keyframes fade { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } .author { margin-top: 15px; font-weight: bold; color: #333; } .dots { margin-top: 15px; } .dot { display: inline-block; width: 10px; height: 10px; background: #ccc; border-radius: 50%; margin: 0 4px; cursor: pointer; } .dot.active { background: #3498db; }
let current = 0; const testimonials = document.querySelectorAll(".testimonial"); const dots = document.querySelectorAll(".dot"); function showTestimonial(index) { testimonials.forEach((t, i) => { t.classList.remove("active"); dots[i].classList.remove("active"); if (i === index) { t.classList.add("active"); dots[i].classList.add("active"); } }); } function nextTestimonial() { current = (current + 1) % testimonials.length; showTestimonial(current); } dots.forEach((dot, i) => { dot.addEventListener("click", () => { current = i; showTestimonial(current); }); }); setInterval(nextTestimonial, 4000);
Ad #1
Ad #2
Scroll to Top