<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);Nothing to show yetType HTML, CSS or JavaScript and your page appears here.
Click any element to find its code Esc
Check this code before you run it
It came from a shared link. It runs with fewer permissions, so it cannot open pop-ups, submit forms or start downloads.
0.00s / 0.00s
Nothing has animated yet. Hover, click or type in the preview and each CSS animation, transition or
element.animate() call shows up here as it plays.