https://www.kennettmo.com/assets/unlok_website_engine/slideshow_controller-c4e4c88e.js

1import { Controller } from "@hotwired/stimulus"
2
3// Fades between .unlok-slide children on a timer. Arrows and dots are
4// optional targets; hovering pauses the timer so a reader can look.
5export default class extends Controller {
6  static targets = ["slide", "dot"]
7  static values = { interval: { type: Number, default: 5 } }
8
9  connect() {
10    if (this.slideTargets.length < 2) return
11    this.index = Math.max(0, this.slideTargets.findIndex((slide) => slide.classList.contains("is-active")))
12    this.show(this.index)
13    this.play()
14    this.element.addEventListener("mouseenter", this.pause)
15    this.element.addEventListener("mouseleave", this.play)
16  }
17
18  disconnect() {
19    this.pause()
20    this.element.removeEventListener("mouseenter", this.pause)
21    this.element.removeEventListener("mouseleave", this.play)
22  }
23
24  next() { this.show(this.index + 1) }
25  prev() { this.show(this.index - 1) }
26  go(event) { this.show(Number(event.currentTarget.dataset.index)) }
27
28  play = () => {
29    this.pause()
30    this.timer = setInterval(() => this.next(), this.intervalValue * 1000)
31  }
32
33  pause = () => {
34    if (this.timer) clearInterval(this.timer)
35    this.timer = null
36  }
37
38  show(index) {
39    const count = this.slideTargets.length
40    this.index = (index + count) % count
41    this.slideTargets.forEach((slide, i) => slide.classList.toggle("is-active", i === this.index))
42    this.dotTargets.forEach((dot, i) => dot.classList.toggle("is-active", i === this.index))
43  }
44}