Package Exports

svelte-carousel

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svelte-carousel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>