Section
Testimonial Carousel
Auto-rotating carousel with dots and arrows.
- Section
- Vanilla
- HTML
- MIT
Preview
Live section
No interactive preview for this section.
Install it with the CLI below, or read the implementation on this page.
Install
Add to your project
npx devsnips add Vanilla/Sections/Testimonials/testimonials-carousel Vanilla/Sections/Testimonials/testimonials-carousel <!-- Snippet Name: Testimonial Carousel | Family: Testimonials | Description: Auto-rotating carousel with dots and arrows. | Author: DevSnips Contributors | Usage: Copy the .nb section into your page. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testimonial Carousel | DevSnips</title>
<meta name="description" content="Neo-brutalist vanilla HTML/CSS/JS section: testimonials-carousel. Copy, customize, ship.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style> /* ---- Neo-Brutalist design tokens ---- */
:root{
--bg:#fbfbf9; --surface:#ffffff; --foreground:#0a0a0a; --muted:#525252;
--border:#0a0a0a; --primary:#4f46e5; --primary-fg:#ffffff;
--accent:#facc15; --pink:#ec4899; --lime:#a3e635; --cyan:#22d3ee;
--radius:6px; --radius-lg:10px;
--shadow:4px 4px 0 var(--border); --shadow-lg:8px 8px 0 var(--border);
--ring:0 0 0 3px #fff, 0 0 0 6px var(--primary);
--container:1200px; --gutter:20px;
--fs-h1:clamp(2.4rem,6vw,4.25rem); --fs-h2:clamp(1.9rem,4vw,2.9rem);
--fs-h3:clamp(1.25rem,2.4vw,1.6rem); --fs-lead:clamp(1.05rem,2vw,1.25rem);
--ff:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
:root{ --bg:#0a0a0a; --surface:#151515; --foreground:#fafafa; --muted:#a3a3a3;
--border:#fafafa; --ring:0 0 0 3px #000, 0 0 0 6px var(--primary); }
}
/* ---- base layout + components ---- */
*{box-sizing:border-box}
.nb{font-family:var(--ff);background:var(--bg);color:var(--foreground);
line-height:1.6;-webkit-font-smoothing:antialiased;margin:0}
.nb .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.nb section{position:relative;padding-block:clamp(56px,9vw,120px)}
.nb h1,.nb h2,.nb h3,.nb h4{font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0}
.nb h1{font-size:var(--fs-h1)} .nb h2{font-size:var(--fs-h2)} .nb h3{font-size:var(--fs-h3)}
.nb p{margin:0} .nb a{color:inherit}
.nb .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;
font-weight:700;text-transform:uppercase;letter-spacing:.14em;
border:2px solid var(--border);background:var(--surface);padding:6px 12px;
border-radius:999px;box-shadow:var(--shadow)}
.nb .lead{font-size:var(--fs-lead);color:var(--muted);max-width:62ch}
.nb .muted{color:var(--muted)}
.nb .center{text-align:center;margin-inline:auto}
.nb .grid{display:grid;gap:var(--gutter)}
.nb .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
font:inherit;font-weight:700;font-size:.98rem;line-height:1;cursor:pointer;
text-decoration:none;border:3px solid var(--border);border-radius:var(--radius);
padding:14px 22px;background:var(--primary);color:var(--primary-fg);
box-shadow:var(--shadow);transition:transform .12s ease,box-shadow .12s ease,background .12s}
.nb .btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
.nb .btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border)}
.nb .btn.outline{background:var(--surface);color:var(--foreground)}
.nb .btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.nb .btn.ghost:hover{box-shadow:var(--shadow);border-color:var(--border);transform:translate(-2px,-2px)}
.nb .btn.accent{background:var(--accent);color:#0a0a0a}
.nb .card{background:var(--surface);border:3px solid var(--border);border-radius:var(--radius);
box-shadow:var(--shadow);padding:24px;transition:transform .14s ease,box-shadow .14s ease}
.nb .card.hover:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-lg)}
.nb .badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;
text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--border);
padding:4px 10px;border-radius:999px;background:var(--surface)}
.nb :focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}
.nb .skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#000;
padding:10px 16px;border:2px solid var(--border);z-index:50;font-weight:700}
.nb .skip:focus{left:8px}
.nb .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
@media (prefers-reduced-motion:reduce){
.nb *,.nb *::before,.nb *::after{animation-duration:.001ms!important;
transition-duration:.001ms!important;animation-iteration-count:1!important}
}
.tcr .head{text-align:center;margin-bottom:30px}.tcr .head h2{margin:12px 0 8px}
.tcr .stage{position:relative;border:3px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);background:var(--surface);padding:40px;overflow:hidden}
.tcr .track{display:flex;transition:transform .35s ease}
.tcr .slide{min-width:100%;text-align:center;padding:0 10px}
.tcr .stars{display:flex;gap:2px;justify-content:center;color:var(--accent);margin-bottom:16px}
.tcr .slide blockquote{font-size:clamp(1.1rem,2.6vw,1.5rem);font-weight:600;margin:0 0 22px}
.tcr .who{display:flex;align-items:center;justify-content:center;gap:12px}
.tcr .av{width:48px;height:48px;border-radius:50%;border:3px solid var(--border);background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:800}
.tcr .who b{display:block}.tcr .who small{color:var(--muted)}
.tcr .ctrl{display:flex;gap:10px;justify-content:center;margin-top:24px}
.tcr .ctrl button{width:44px;height:44px;border:3px solid var(--border);background:var(--surface);border-radius:10px;cursor:pointer;box-shadow:var(--shadow);display:grid;place-items:center}
.tcr .dots{display:flex;gap:8px;justify-content:center;margin-top:14px}
.tcr .dots button{width:12px;height:12px;border-radius:50%;border:2px solid var(--border);background:var(--bg);cursor:pointer;padding:0}
.tcr .dots button[aria-current="true"]{background:var(--primary)}</style>
</head>
<body class="nb">
<a class="skip" href="#main">Skip to content</a>
<section class="tcr" aria-labelledby="tcr-title" data-carousel>
<div class="container">
<div class="head"><span class="eyebrow">Testimonials</span><h2 id="tcr-title">In their words.</h2></div>
<div class="stage">
<div class="track"><div class="slide"><div class="stars" aria-label="5/5"><svg class="is" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z'/></svg><svg class="is" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z'/></svg><svg class="is" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z'/></svg><svg class="is" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z'/></svg><svg class="is" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z'/></svg></div><blockquote>“This is the toolkit I wish I had five years ago.”</blockquote><div class="who"><span class="av">M</span><span><b>Maya Chen</b><small>VP Product, Globex</small></span></div></div><div class="slide"><div class="stars" aria-label="5/5"><svg class="is" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z'/></svg><svg class="is" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z'/></svg><svg class="is" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z'/></svg><svg class="is" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z'/></svg><svg class="is" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z'/></svg></div><blockquote>“We replaced three subscriptions with one.”</blockquote><div class="who"><span class="av">R</span><span><b>Ravi Patel</b><small>CTO, Initech</small></span></div></div><div class="slide"><div class="stars" aria-label="5/5"><svg class="is" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z'/></svg><svg class="is" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z'/></svg><svg class="is" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z'/></svg><svg class="is" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z'/></svg><svg class="is" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z'/></svg></div><blockquote>“Our designers actually enjoy onboarding now.”</blockquote><div class="who"><span class="av">S</span><span><b>Sara Lin</b><small>Design Lead, Hooli</small></span></div></div></div>
<div class="ctrl">
<button type="button" data-prev aria-label="Previous">←</button>
<button type="button" data-next aria-label="Next">→</button>
</div>
<div class="dots"><button data-i="0" aria-label="Go to slide 1" aria-current="true"></button><button data-i="1" aria-label="Go to slide 2"></button><button data-i="2" aria-label="Go to slide 3"></button></div>
</div>
</div>
</section>
<script>
(function(){
var c=document.querySelector('[data-carousel]');if(!c)return;
var track=c.querySelector('.track');var slides=[].slice.call(c.querySelectorAll('.slide'));
var dots=[].slice.call(c.querySelectorAll('.dots button'));var i=0;var timer;
function go(n){i=(n+slides.length)%slides.length;track.style.transform='translateX(-'+(i*100)+'%)';
dots.forEach(function(d,k){d.setAttribute('aria-current',String(k===i))})}
c.querySelector('[data-next]').addEventListener('click',function(){go(i+1);reset()});
c.querySelector('[data-prev]').addEventListener('click',function(){go(i-1);reset()});
dots.forEach(function(d,k){d.addEventListener('click',function(){go(k);reset()})});
function reset(){clearInterval(timer);if(!window.matchMedia('(prefers-reduced-motion:reduce)').matches)timer=setInterval(function(){go(i+1)},5500)}
c.addEventListener('mouseenter',function(){clearInterval(timer)});
c.addEventListener('mouseleave',reset);
if(!window.matchMedia('(prefers-reduced-motion:reduce)').matches)reset();
document.addEventListener('keydown',function(e){if(!c.contains(document.activeElement))return;if(e.key==='ArrowRight'){go(i+1);reset()}if(e.key==='ArrowLeft'){go(i-1);reset()}});
})();</script>
</body>
</html># Testimonial Carousel
Auto-rotating carousel with dots and arrows.
**Technology:** Vanilla HTML/CSS/JS
**Category:** sections / testimonials
**Design:** Neo-Brutalist (flat colors, hard shadows, bold borders)
**Responsive:** Mobile-first (320px → 1920px)
**Dark mode:** via `prefers-color-scheme`
**Tags:** testimonials, carousel, slider
**Features:** keyboard, pause on hover, reduced-motion safe
## Usage
1. Copy the contents of `code.html` into your page.
2. The section is self-contained (inline CSS + JS). No build step.
3. Tweak the CSS variables in `:root` to rebrand. 122 lines UTF-8 · LF · Spaces: 2
Continue browsing