Add automatic testimonial rotation with timer functionality in Testimonials component
This commit is contained in:
@@ -1,4 +1,5 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import { onMount, onDestroy } from 'svelte';
|
||||||
const testimonials = [
|
const testimonials = [
|
||||||
{
|
{
|
||||||
name: 'Sarah Johnson',
|
name: 'Sarah Johnson',
|
||||||
@@ -21,14 +22,31 @@
|
|||||||
];
|
];
|
||||||
|
|
||||||
let currentIndex = 0;
|
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;
|
currentIndex = (currentIndex + 1) % testimonials.length;
|
||||||
|
if (reset) resetTimer();
|
||||||
}
|
}
|
||||||
|
|
||||||
function prev() {
|
function prev() {
|
||||||
currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length;
|
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>
|
</script>
|
||||||
|
|
||||||
<section class="py-20 bg-surface">
|
<section class="py-20 bg-surface">
|
||||||
|
Reference in New Issue
Block a user