svelte-carousel/README.md

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 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 (ms)
autoplayDirection	string	'next'	Auto play change direction (next or prev)
pauseOnFocus	boolean	false	Pause autoplay on focus
dots	boolean	true	Current page indicator dots
timingFunction	string	'ease-in-out'	CSS animation timing function

Events

pageChange

Is dispatched on page change

Payload field	Type	Description
event.detail	number	Current page index

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

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>