<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);
