svelte-carousel

npm npm
GitHub repo GitHub followers

Demo

Installation

yarn add svelte-carousel

npm install svelte-carousel

<script>
 import Carousel from 'svelte-carousel'
 // ...
</script>

SvelteKit support

yarn add svelte-carousel -D

npm install svelte-carousel -D

const config = {
 // existing props
 kit: {
 // existing props
 vite: {
 optimizeDeps: {
 include: ['lodash.get', 'lodash.isequal', 'lodash.clonedeep']
 }
 // plugins: []
 }
 }
}

<script>
 import Carousel from 'svelte-carousel';
 import { browser } from '$app/environment';
 let carousel; // for calling methods of the carousel instance
 
 const handleNextClick = () => {
 carousel.goToNext()
 }
</script>
{#if browser}
 <Carousel
 bind:this={carousel}
 >
 <div>1</div>
 <div>2</div>
 <div>3</div>
 </Carousel>
{/if}
<button on:click={handleNextClick}>Next</button>

Vite support

export default defineConfig({
 optimizeDeps: {
 include: ['lodash.get', 'lodash.isequal', 'lodash.clonedeep']
 }
})

<script>
 import Carousel from 'svelte-carousel'
 let carousel; // for calling methods of the carousel instance
 const handleNextClick = () => {
 carousel.goToNext()
 }
</script>
<Carousel
 bind:this={carousel}
>
 <div>1</div>
 <div>2</div>
 <div>3</div>
</Carousel>
<button on:click={handleNextClick}>Next</button>

Props

Events

pageChange

<Carousel
 on:pageChange={
 event => console.log(`Current page index: ${event.detail}`)
 }
>
 <!-- -->
</Carousel>

Slots

prev and next

<Carousel
 let:showPrevPage
 let:showNextPage
>
 <div slot="prev">
 <!-- -->
 </div>
 <div slot="next">
 <!-- -->
 </div>
 <!-- -->
</Carousel>

dots

<Carousel
 let:currentPageIndex
 let:pagesCount
 let:showPage
>
 <div slot="dots">
 <!-- -->
 </div>
 <!-- -->
</Carousel>

Default slot

<Carousel
 let:loaded
>
 <div>
 <!-- -->
 </div>
 <!-- -->
</Carousel>

Methods

goTo

<script>
 // ...
 let carousel;
 function goToStartPage() {
 carousel.goTo(0, { animated: false })
 }
</script>
<Carousel
 bind:this={carousel}
>
 <!-- -->
</Carousel>
<button class="button" on:click={goToStartPage}>Go</button>

goToPrev

<script>
 // ...
 let carousel;
 function goToPrevPage() {
 carousel.goToPrev({ animated: false })
 }
</script>
<Carousel
 bind:this={carousel}
>
 <!-- -->
</Carousel>
<button class="button" on:click={goToPrevPage}>Go</button>

goToNext

<script>
 // ...
 let carousel;
 function goToNextPage() {
 carousel.goToNext({ animated: false })
 }
</script>
<Carousel
 bind:this={carousel}
>
 <!-- -->
</Carousel>
<button class="button" on:click={goToNextPage}>Go</button>