- Imports/exports always at top - Sapper template not needing a div to execute - NPM packages updates: @rollup/plugin-commonjs 11.1.0 has a bug about import/exports
23 lines
623 B
Svelte
23 lines
623 B
Svelte
<script>
|
|
import { createEventDispatcher } from 'svelte'
|
|
|
|
// Props
|
|
export let className = ''
|
|
export let photos
|
|
export let currentIndex
|
|
const dispatch = createEventDispatcher()
|
|
</script>
|
|
|
|
<ol class={className}>
|
|
{#each photos as dot, index}
|
|
<li
|
|
class:active={index === currentIndex}
|
|
class:small={index < currentIndex - 2 || index > currentIndex + 2}
|
|
class:hidden={index < currentIndex - 3 || index > currentIndex + 3}
|
|
on:click={() => dispatch('goToIndex', index)}
|
|
>
|
|
<button aria-label="Go to photo #{index + 1}"></button>
|
|
</li>
|
|
{/each}
|
|
</ol>
|