Package Exports

svelte-carousel
svelte-carousel/src/main.js

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

Installation

yarn add svelte-carousel

npm install svelte-carousel

Import component

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

SvelteKit support

There are several things to keep in mind when svelte-carousel is used with SvelteKit. This is because svelte-carousel is a client-side library and depends on document and window. See more in SvelteKit FAQ.

Install svelte-carousel as a dev dependency. Why as a dev dependency?

yarn add svelte-carousel -D

npm install svelte-carousel -D

Extend kit in svelte.config.js to include the vite property

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

Import and use it:

<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

Extend optimizeDeps.include in vite.config.js

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

Import and use it:

<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

Prop	Type	Default	Description
`arrows`	`boolean`	`true`	Enables 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 autoplay of pages
`autoplayDuration`	`number`	`3000`	Autoplay change interval (ms)
`autoplayDirection`	`string`	`'next'`	Autoplay change direction (`next` or `prev`)
`pauseOnFocus`	`boolean`	`false`	Pauses autoplay on focus (for touchable devices - tap the carousel to toggle the autoplay, for non-touchable devices - hover over the carousel to pause the autoplay)
`autoplayProgressVisible`	`boolean`	`false`	Shows autoplay duration progress indicator
`dots`	`boolean`	`true`	Current page indicator dots
`timingFunction`	`string`	`'ease-in-out'`	CSS animation timing function
`swiping`	`boolean`	`true`	Enables swiping
`particlesToShow`	`number`	`1`	Number of elements to show
`particlesToScroll`	`number`	`1`	Number of elements to scroll

Events

`pageChange`

It 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 how dots look like.

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
`currentPageIndex`	`number`	Represents current page index (start from 0)

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

Methods

`goTo`

Navigates to a page by index. (pageIndex, options) => Promise<void>.

Arguments:

Argument	Type	Default	Description
`pageIndex`	`number`		Page number
`options.animated`	`boolean`	`true`	Should it be animated or not

<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`

Navigates to the previous page. (options) => Promise<void>.

Arguments:

Argument	Type	Default	Description
`options.animated`	`boolean`	`true`	Should it be animated or not

<script>
  // ...
  let carousel;
  function goToPrevPage() {
    carousel.goToPrev({ animated: false })
  }
</script>

<Carousel
  bind:this={carousel}
>
  <!--  -->
</Carousel>
<button class="button" on:click={goToPrevPage}>Go</button>

`goToNext`

Navigates to the next page. (options) => Promise<void>.

Arguments:

Argument	Type	Default	Description
`options.animated`	`boolean`	`true`	Should it be animated or not

<script>
  // ...
  let carousel;
  function goToNextPage() {
    carousel.goToNext({ animated: false })
  }
</script>

<Carousel
  bind:this={carousel}
>
  <!--  -->
</Carousel>
<button class="button" on:click={goToNextPage}>Go</button>