Add automatic testimonial rotation with timer functionality in Testimonials component

This commit is contained in:
becarta
2025-05-16 01:10:01 +02:00
parent 47fe59d3c3
commit 4f0a849323

View File

@@ -1,4 +1,5 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
const testimonials = [
{
name: 'Sarah Johnson',
@@ -21,14 +22,31 @@
];
let currentIndex = 0;
let timer: ReturnType<typeof setTimeout>;
const ROTATE_INTERVAL = 20000; // 20 seconds
function next() {
function next(reset = true) {
currentIndex = (currentIndex + 1) % testimonials.length;
if (reset) resetTimer();
}
function prev() {
currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length;
resetTimer();
}
function resetTimer() {
clearTimeout(timer);
timer = setTimeout(() => next(false), ROTATE_INTERVAL);
}
onMount(() => {
timer = setTimeout(() => next(false), ROTATE_INTERVAL);
});
onDestroy(() => {
clearTimeout(timer);
});
</script>
<section class="py-20 bg-surface">