Feat: navigation au clavier entre slides (← →)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
8e01cbe611
commit
d7dacd6b6c
1 changed files with 16 additions and 0 deletions
|
|
@ -1,5 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
|
import { onMount } from 'svelte'
|
||||||
import { slides } from '@state/slides.svelte'
|
import { slides } from '@state/slides.svelte'
|
||||||
|
import { slideTo } from '@router'
|
||||||
|
|
||||||
import Header from '@components/layout/Header.svelte'
|
import Header from '@components/layout/Header.svelte'
|
||||||
import Cursor from '@components/layout/Cursor.svelte'
|
import Cursor from '@components/layout/Cursor.svelte'
|
||||||
|
|
@ -30,6 +32,20 @@
|
||||||
|
|
||||||
const wrapperWidth = $derived(`${slides.all.length * 100}vw`)
|
const wrapperWidth = $derived(`${slides.all.length * 100}vw`)
|
||||||
const wrapperTransform = $derived(`translateX(-${slides.activeIndex * 100}vw)`)
|
const wrapperTransform = $derived(`translateX(-${slides.activeIndex * 100}vw)`)
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
const handleKeydown = (e) => {
|
||||||
|
if (e.key === 'ArrowRight') {
|
||||||
|
const next = slides.all[slides.activeIndex + 1]
|
||||||
|
if (next) slideTo(next.path)
|
||||||
|
} else if (e.key === 'ArrowLeft') {
|
||||||
|
const prev = slides.all[slides.activeIndex - 1]
|
||||||
|
if (prev) slideTo(prev.path)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
window.addEventListener('keydown', handleKeydown)
|
||||||
|
return () => window.removeEventListener('keydown', handleKeydown)
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="app">
|
<div class="app">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue