svelte-carousel

The awesome carousel component for Svelte 3

Demo

https://vadimkorr.github.io/svelte-carousel

Installation

yarn add svelte-carousel
npm install svelte-carousel

Import component and styles in App component

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

Props

Prop	Type	Default	Description
arrows	boolean	true	Enable Next/Prev arrows
infinite	boolean	true	Infinite looping
initialPageIndex	number	0	Page to start on
duration	number	500	Transition duration (ms)
autoplay	boolean	false	Enables auto play of pages
autoplayDuration	number	3000	Auto play change interval
autoplayDirection	string	3000	Auto play change direction (next or prev)
dots	boolean	true	Current page indicator dots

Slots

prev and next

They are used for customizing prev and next buttons.

Slot props:

Prop	Type	Description
showPrevPage	function	Call it to switch to the previos page
showNextPage	function	Call it to switch to the next page

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

dots

This slot is used for customizing dots appearance.

Slot props:

| Prop | Type | Description | |---------------------|---------- --|----------------------------------------------| | currentPageIndex | number | Represents current page index (start from 0) | | pagesCount | number | Total pages amount | | showPage | function | Takes index as page to be shown |

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

Default slot

This slot takes content for the carousel.

Slot props:

Prop	Type	Description
loaded	number[]	Contains indexes of pages to be loaded. Can be used for lazy loading

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