1.0.19 • Published 2 years ago
@coryparsnipson/svelte-carousel v1.0.19
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
insvelte.config.js
to include thevite
property
const config = {
// existing props
kit: {
// existing props
vite: { optimizeDeps: { include: ['lodash.get', 'lodash.isequal', 'lodash.clonedeep'] } }
}
}
- Import and use it:
<script>
import { onMount } from 'svelte';
let Carousel; // for saving Carousel component class
let carousel; // for calling methods of the carousel instance
onMount(async () => {
const module = await import('svelte-carousel');
Carousel = module.default;
});
const handleNextClick = () => {
carousel.goToNext()
}
</script>
<svelte:component
this={Carousel}
bind:this={carousel}
>
<div>1</div>
<div>2</div>
<div>3</div>
</svelte:component>
<button on:click={handleNextClick}>Next</button>
Vite support
- Extend
optimizeDeps.include
invite.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 |
<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>
1.0.19
2 years ago