Testimonial Slider Without External Library with Alpine.js

1. Why a testimonial slider concentrates social proof

A testimonial slider solves a simple space problem: ten customer quotes stacked one after another would make a page unnecessarily long, but all ten are too valuable to show only a single one. A testimonial slider compresses these quotes into a fixed, compact area and rotates them over time or on user interaction, keeping social proof concentrated in a prominent spot without cluttering the page.

Most ready made slider libraries such as Swiper or Slick, however, come with substantial overhead, often several hundred kilobytes of JavaScript and CSS, for a feature that at its core consists of only an index, a list and a handful of transitions. A self built testimonial slider with Alpine.js does not need this overhead, because Alpine is already loaded anyway and the core logic fits in under fifty lines of code.

The following sections build a complete testimonial slider with autoplay, touch swipe, keyboard navigation, bullet indicators and full accessibility, ready to drop into any Hyvä theme.

2. Foundation: data structure and active index in the x-data state

The state of a testimonial slider essentially needs only two things: an array holding the individual testimonials and a numeric index marking the currently visible item. Each testimonial object typically contains a quote, author name, position and optionally a company logo or star rating. This flat structure keeps the testimonial slider easy to extend, because new fields per testimonial can simply be added without touching the navigation logic.

The navigation itself boils down to two methods: one that increments the index by one and wraps back to zero once the end is reached, and a mirrored method for the reverse direction. Modulo arithmetic makes this wrap around logic trivial and prevents a testimonial slider from simply stopping once the last item is reached instead of jumping back to the start.

// testimonialSlider.js — core state and navigation
document.addEventListener('alpine:init', () => {
  Alpine.data('testimonialSlider', (testimonials) => ({
    testimonials,
    activeIndex: 0,

    next() {
      this.activeIndex = (this.activeIndex + 1) % this.testimonials.length;
    },

    prev() {
      // Modulo with negative numbers needs the extra + length in JS
      this.activeIndex = (this.activeIndex - 1 + this.testimonials.length) % this.testimonials.length;
    },

    goTo(index) {
      this.activeIndex = index;
    },

    get current() {
      return this.testimonials[this.activeIndex];
    }
  }));
});

3. Smooth transitions between slides with x-transition

An abrupt switch without any animation feels unfinished in a testimonial slider and leaves users unsure whether the change even happened. Alpine's built in x-transition directive solves this without an extra animation library, by automatically applying CSS transitions when an element enters or leaves. For a testimonial slider, a combination of an opacity fade and a slight horizontal offset works well, hinting at the direction of the change.

One important detail: when using x-transition together with x-if for the currently active testimonial, :key must be set so Alpine recognizes it as a new element rather than merely updating the existing DOM element with new text. Without this key, the transition would not retrigger, because Alpine reuses the same DOM element instead of fading it out and back in.

<div x-data="testimonialSlider(testimonialsData)" class="testimonial-slider">
  <template x-for="(item, index) in testimonials" :key="index">
    <div
      x-show="activeIndex === index"
      x-transition:enter="transition ease-out duration-300"
      x-transition:enter-start="opacity-0 translate-x-4"
      x-transition:enter-end="opacity-100 translate-x-0"
      x-transition:leave="transition ease-in duration-200"
      x-transition:leave-start="opacity-100"
      x-transition:leave-end="opacity-0"
    >
      <blockquote x-text="item.quote"></blockquote>
      <p x-text="item.author"></p>
    </div>
  </template>
</div>

4. Autoplay with pause on hover and focus

An automatically rotating testimonial slider does not force users to click themselves to see further quotes, which raises the average dwell time on the individual testimonials. The implementation is a simple setInterval that calls the next() method every few seconds, similar to the pattern of a countdown timer, just in the reverse counting direction with no target date.

Crucial for usability is pausing autoplay on hover and on keyboard focus inside the testimonial slider. A user currently reading a longer quote should not be interrupted by an automatic switch before they finish reading. The pause logic checks two events for this: mouseenter/mouseleave for desktop users and focusin/focusout for keyboard users tabbing through the slider's navigation elements.

Alpine.data('testimonialSlider', (testimonials) => ({
  testimonials,
  activeIndex: 0,
  autoplayId: null,
  paused: false,

  init() {
    this.startAutoplay();
  },

  startAutoplay() {
    this.autoplayId = setInterval(() => {
      if (!this.paused) this.next();
    }, 6000);
  },

  pause() { this.paused = true; },
  resume() { this.paused = false; },

  destroy() {
    clearInterval(this.autoplayId);
  }
}));

5. Touch swipe: gestures without an external gesture library

On mobile devices users expect to be able to operate a testimonial slider with a swipe gesture, not only through small arrow buttons. The implementation needs no external touch library, only three native touch events: touchstart stores the starting position, touchmove can optionally provide visual feedback, and touchend calculates the distance traveled and decides whether the gesture counts as a swipe.

A threshold of roughly fifty pixels prevents a testimonial slider from reacting to an accidental jitter of the finger. Only once the horizontal distance between start and end exceeds this threshold does the slider actually move to the next or previous card, the direction being derived from the sign of the difference.

Alpine.data('testimonialSlider', (testimonials) => ({
  testimonials,
  activeIndex: 0,
  touchStartX: 0,
  SWIPE_THRESHOLD: 50,

  handleTouchStart(event) {
    this.touchStartX = event.touches[0].clientX;
  },

  handleTouchEnd(event) {
    const touchEndX = event.changedTouches[0].clientX;
    const distance = touchEndX - this.touchStartX;

    if (Math.abs(distance) < this.SWIPE_THRESHOLD) return; // accidental jitter
    distance < 0 ? this.next() : this.prev();
  }
}));

6. Keyboard navigation and focus order

A testimonial slider that only works with a mouse or touch systematically excludes keyboard users. The left and right arrow keys should be listened to as soon as an element inside the slider has focus, jumping to the previous or next card via @keydown.arrow-left and @keydown.arrow-right. Alpine offers these named key modifiers directly, without manually checking key codes.

The focus order within a testimonial slider should stay logical: first the previous and next buttons, then the bullet navigation, then any links present inside the active testimonial. Hidden, inactive slides must not be part of the tab order, otherwise a keyboard user tabs through invisible content, which is extremely confusing. This is achieved by giving inactive slides tabindex="-1" or removing them from the DOM entirely.

7. Bullet indicators and direct slide selection

A testimonial slider with a very large number of entries, for instance more than ten customer quotes, should not let the row of bullets grow without limit, because twenty small dots next to each other quickly become confusing. Beyond a certain count, a reduced display makes more sense, for instance showing only the active dot and its immediate neighbors at full size, while more distant dots are shown smaller or summarized as something like seven of twenty.

Besides previous and next arrows, users often expect a testimonial slider to give a direct overview of how many testimonials exist in total and which one is currently active. Bullet indicators, usually shown as a row of small dots below the slider, fulfill exactly this function. Clicking a specific bullet jumps directly to the corresponding testimonial via the goTo(index) method, without navigating through all cards in between.

Visually, the active bullet typically stands out through a different color or size, which in Alpine is implemented via a dynamic class binding with :class and a comparison against activeIndex. This immediate visual feedback makes the state of the testimonial slider recognizable at a glance, even without actively reading the quote.

<!-- Bullet indicators — direct navigation via goTo(index) -->
<div class="bullets" role="tablist">
  <template x-for="(item, index) in testimonials" :key="index">
    <button
      @click="goTo(index)"
      :class="activeIndex === index ? 'bg-teal-600' : 'bg-slate-300'"
      class="w-2.5 h-2.5 rounded-full"
      :aria-label="`Testimonial ${index + 1} of ${testimonials.length}`"
    ></button>
  </template>
</div>

8. Accessibility: aria-roledescription and a live region

For screen reader users, a testimonial slider needs semantic markup that goes beyond pure visual design. The container gets role="region" together with aria-roledescription="carousel", so a screen reader announces the purpose of the element correctly. Each individual card gets aria-roledescription="slide" as well as a position indicator such as testimonial 2 of 5, so users can track progress without having to go through every single card.

When a testimonial slider changes automatically via autoplay, a sparse aria-live="polite" region should announce the change, but not on every single frame of the transition animation. Additionally, autoplay should generally be pausable, ideally via a visible play/pause button, because automatically moving content must be explicitly controllable for users with cognitive impairments, as required by WCAG.

9. Testimonial slider implementations compared

There are several common ways to implement a testimonial slider, with substantial differences in bundle size and control.

The comparison shows that a testimonial slider with Alpine.js combines full control over markup and design with minimal additional bundle size, because Alpine is loaded in a Hyvä theme anyway. No extra CSS reset from a foreign library, no versioning conflicts.

10. Summary

A good testimonial slider without an external library needs a flat state with an array and an active index, smooth transitions via x-transition, pausable autoplay, native touch gestures, full keyboard navigation and semantic accessibility attributes. With Alpine.js this testimonial slider comes together without Swiper, Slick or any other external library, directly inside an existing Hyvä setup.

The biggest advantage over ready made libraries lies in full control over markup and CSS. No generic library markup fighting against Tailwind classes, no extra CSS file that needs overriding. A self built testimonial slider fits exactly into the existing design system instead of bending it.

11. FAQ: Testimonial Slider Without External Library with Alpine.js