Testimonial Scroller
One testimonial at a time, with manual navigation and optional playback.
HTML source & reuse instructions
Keep the CSS and JavaScript links from this page. Asset paths are relative to the modules folder.
<div aria-label="Example testimonials" aria-roledescription="carousel" data-autoplay="true" data-versa-slider="" data-interval="4000" data-transition="fade" role="region" tabindex="0"><div class="versa-slides"><div class="versa-slide"><figure class="versa-quote"><p class="versa-site-eyebrow">ILLUSTRATIVE TESTIMONIAL</p><blockquote>“The small details make the experience feel effortless.”</blockquote><figcaption><strong>Alex Jordan</strong><span>Example customer</span></figcaption></figure></div><div class="versa-slide" hidden=""><figure class="versa-quote"><p class="versa-site-eyebrow">ILLUSTRATIVE TESTIMONIAL</p><blockquote>“A clear structure gave our ideas room to grow.”</blockquote><figcaption><strong>Morgan Riley</strong><span>Example customer</span></figcaption></figure></div><div class="versa-slide" hidden=""><figure class="versa-quote"><p class="versa-site-eyebrow">ILLUSTRATIVE TESTIMONIAL</p><blockquote>“Flexible components made every page feel connected.”</blockquote><figcaption><strong>Taylor Smith</strong><span>Example customer</span></figcaption></figure></div></div><div class="versa-slider-controls"><button aria-label="Previous slide" class="versa-slider-arrow versa-slider-prev" data-slider-prev="" type="button">‹</button><span class="visually-hidden" data-slider-status="" role="status"></span><button aria-label="Next slide" class="versa-slider-arrow versa-slider-next" data-slider-next="" type="button">›</button><button aria-pressed="true" class="versa-motion-toggle" data-slider-play="" type="button">Pause slideshow</button></div><div class="versa-slider-dots" data-slider-dots=""></div></div>