Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vadimkorr/svelte-carousel
The awesome carousel component for Svelte 3 :arrow_left: :art: :arrow_right:
https://github.com/vadimkorr/svelte-carousel
carousel carousel-component svelte svelte-carousel sveltejs sveltejs-language
Last synced: 6 days ago
JSON representation
The awesome carousel component for Svelte 3 :arrow_left: :art: :arrow_right:
- Host: GitHub
- URL: https://github.com/vadimkorr/svelte-carousel
- Owner: vadimkorr
- License: apache-2.0
- Created: 2021-01-11T08:21:27.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-01-14T12:43:53.000Z (9 months ago)
- Last Synced: 2024-04-26T02:22:30.205Z (5 months ago)
- Topics: carousel, carousel-component, svelte, svelte-carousel, sveltejs, sveltejs-language
- Language: JavaScript
- Homepage: https://vadimkorr.github.io/svelte-carousel
- Size: 2.09 MB
- Stars: 276
- Watchers: 3
- Forks: 55
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte-carousel
[](https://www.npmjs.com/package/svelte-carousel) [](https://www.npmjs.com/package/svelte-carousel)
[](https://github.com/vadimkorr/svelte-carousel) [](https://github.com/vadimkorr)
The awesome carousel component for Svelte 3
## Demo
* [vadimkorr.github.io/svelte-carousel](https://vadimkorr.github.io/svelte-carousel)
* [REPL](https://svelte.dev/repl/f503a458832f4a358d9ec00f88945ff5)
## Installation
```bash
yarn add svelte-carousel
```
```bash
npm install svelte-carousel
```
Import component
```jsx
import Carousel from 'svelte-carousel'
// ...
```
## 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](https://kit.svelte.dev/faq).
1. Install `svelte-carousel` as a dev dependency. [Why as a dev dependency?](https://github.com/sveltejs/sapper-template#using-external-components)
```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
import Carousel from 'svelte-carousel';
import { browser } from '$app/environment';
let carousel; // for calling methods of the carousel instance
const handleNextClick = () => {
carousel.goToNext()
}
{#if browser}
1
2
3
{/if}
Next
```
## 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
import Carousel from 'svelte-carousel'
let carousel; // for calling methods of the carousel instance
const handleNextClick = () => {
carousel.goToNext()
}
1
2
3
Next
```
## 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 |
```jsx
console.log(`Current page index: ${event.detail}`)
}
>
```
## 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 |
```jsx
```
### `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 |
```jsx
```
### 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) |
```jsx
```
## Methods
### `goTo`
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
// ...
let carousel;
function goToStartPage() {
carousel.goTo(0, { animated: false })
}
Go
```
### `goToPrev`
Navigates to the previous page. `(options) => Promise`.
Arguments:
| Argument | Type | Default | Description |
|--------------------|-------------|---------|-------------------------------|
| `options.animated` | `boolean` | `true` | Should it be animated or not |
```jsx
// ...
let carousel;
function goToPrevPage() {
carousel.goToPrev({ animated: false })
}
Go
```
### `goToNext`
Navigates to the next page. `(options) => Promise`.
Arguments:
| Argument | Type | Default | Description |
|--------------------|-------------|---------|------------------------------|
| `options.animated` | `boolean` | `true` | Should it be animated or not |
```jsx
// ...
let carousel;
function goToNextPage() {
carousel.goToNext({ animated: false })
}
Go
```