Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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:

Awesome Lists containing this project

README

        

![svelte-carousel](./docs/svelte-carousel-logo-md.png)

# svelte-carousel

[![npm](https://img.shields.io/npm/v/svelte-carousel.svg)](https://www.npmjs.com/package/svelte-carousel) [![npm](https://img.shields.io/npm/dm/svelte-carousel.svg)](https://www.npmjs.com/package/svelte-carousel)


[![GitHub repo](https://img.shields.io/badge/github-repo-green.svg?style=flat)](https://github.com/vadimkorr/svelte-carousel) [![GitHub followers](https://img.shields.io/github/followers/vadimkorr.svg?style=social&label=Follow)](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
```