Skip to content

Latest commit

 

History

History
48 lines (40 loc) · 1.57 KB

Carousel.md

File metadata and controls

48 lines (40 loc) · 1.57 KB

Carousel

This component takes a list of items and index and will return the current index. It exposes functions to go the next or previous item as well as way to jump to a specified index.

Property Description
items The array of items in the carousel
currentIndex The index of the currently displayed item
loop Flag indicating that the array should loop around, defaults to false
setIndex a function allowing the user to move immediately to a specified index
controls an object containing a next and a previous function

Examples

For brevity, the example code excludes styling, which is of course always done on the consumer side.

<script>
    import { Carousel } from 'renderless-svelte'
    const items = ["Squirrel 🐿️", "Rabbit 🐇", "Hamster 🐹"]
</script>

<Carousel items="{items}" let:payload let:controls>
    <button type="button" on:click={controls.previous}>Previous</button>
    <span>{payload}</span>
    <button type="button" on:click={controls.next}>Next</button>
</Carousel>
<script>
    import { Carousel } from 'renderless-svelte'
    const items = ["Squirrel 🐿️", "Rabbit 🐇", "Hamster 🐹"]
</script>

<Carousel items="{items}" let:payload let:setIndex let:currentIndex>
    <div>
        <span>{payload}</span>
        <ul>
            {#each items as _, i}
            <li>
                <button class:active={currentIndex === i} on:click={() => setIndex(i)}>{i}</button>
            </li>
            {/each}
        </ul>
    </div>
</Carousel>