https://www.accountablehq.com/assets/controllers/testimonial_slider_controller-c3a19379.js

1import { Controller } from "@hotwired/stimulus";
2
3export default class extends Controller {
4  static targets = ["slide", "slideContainer", "indicator"];
5  static values = {
6    currentIndex: { type: Number, default: 0 },
7    totalSlides: Number,
8  };
9
10  connect() {
11    this.totalSlidesValue = this.slideTargets.length;
12    this.showSlide(this.currentIndexValue);
13  }
14
15  next() {
16    this.currentIndexValue =
17      (this.currentIndexValue + 1) % this.totalSlidesValue;
18    this.showSlide(this.currentIndexValue);
19  }
20
21  previous() {
22    this.currentIndexValue =
23      (this.currentIndexValue - 1 + this.totalSlidesValue) %
24      this.totalSlidesValue;
25    this.showSlide(this.currentIndexValue);
26  }
27
28  goToSlide(event) {
29    const index = parseInt(event.currentTarget.dataset.index);
30    this.currentIndexValue = index;
31    this.showSlide(index);
32  }
33
34  showSlide(index) {
35    // Update slide position
36    const translateX = -100 * index;
37    this.slideContainerTarget.style.transform = `translateX(${translateX}%)`;
38
39    // Update indicators
40    this.indicatorTargets.forEach((indicator, i) => {
41      if (i === index) {
42        indicator.classList.add("bg-blue-600");
43        indicator.classList.remove("bg-gray-200");
44      } else {
45        indicator.classList.remove("bg-blue-600");
46        indicator.classList.add("bg-gray-200");
47      }
48    });
49  }
50}