Svelte carousel
npm install svelte-carouselbash
yarn add svelte-carousel
`
`bash
npm install svelte-carousel
`
Import component
`jsx
`
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.
1. Install svelte-carousel as a dev dependency. Why as a dev dependency?
`bash
yarn add svelte-carousel -D
`
`bash
npm install svelte-carousel -D
`
2. Extend kit in svelte.config.js to include the vite property
`js
const config = {
// existing props
kit: {
// existing props
vite: {
optimizeDeps: {
include: ['lodash.get', 'lodash.isequal', 'lodash.clonedeep']
}
// plugins: []
}
}
}
`
3. Import and use it:
`jsx
{#if browser}
>
1
2
3
{/if}
`
Vite support
1. Extend optimizeDeps.include in vite.config.js
`js
export default defineConfig({
optimizeDeps: {
include: ['lodash.get', 'lodash.isequal', 'lodash.clonedeep']
}
})
`
2. Import and use it:
`jsx
>
1
2
3
`
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
$3
It is dispatched on page change
| Payload field | Type | Description |
|--------------------|-------------|---------------------------------------|
| event.detail | number | Current page index |
`jsx
event => console.log(Current page index: ${event.detail})
}
>
`
Slots
$3
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 |
`jsx
let:showNextPage
>
`
$3
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 |
`jsx
let:pagesCount
let:showPage
>
`
$3
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) |
`jsx
>
`
Methods
$3
Navigates to a page by index. (pageIndex, options) => Promise.
Arguments:
| Argument | Type | Default | Description |
|--------------------|-------------|---------|---------------------------------------|
| pageIndex | number | | Page number |
| options.animated | boolean | true | Should it be animated or not |
`jsx
>
`
$3
Navigates to the previous page. (options) => Promise.
Arguments:
| Argument | Type | Default | Description |
|--------------------|-------------|---------|-------------------------------|
| options.animated | boolean | true | Should it be animated or not |
`jsx
>
`
$3
Navigates to the next page. (options) => Promise.
Arguments:
| Argument | Type | Default | Description |
|--------------------|-------------|---------|------------------------------|
| options.animated | boolean | true | Should it be animated or not |
`jsx
>
``