-
-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)
+This is a fork of [svelte-carousel](https://github.com/vadimkorr/svelte-carousel) project made due to it's lack of maintainment.
## Installation
+
```bash
-yarn add svelte-carousel
-```
-```bash
-npm install svelte-carousel
+yarn add -D @xxfogs/svelte-carousel
```
-Import component
-```jsx
+```bash
+pnpm i -D @xxfogs/svelte-carousel
+```
+
+```bash
+yarn i -D @xxfogs/svelte-carousel
+```
+
+## Usage
+
+1. Install as development dependancy
+2. Import and use
+
+```svelte
-```
-
-## 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
-
-
-
-
-
1
-
2
-
3
-
-
-
-```
-
## Props
+
| Prop | Type | Default | Description |
|---------------------------|------------|-----------------|-----------------------------------------------|
| `arrows` | `boolean` | `true` | Enables next/prev arrows |
@@ -146,13 +68,14 @@ export default defineConfig({
## Events
### `pageChange`
+
It is dispatched on page change
| Payload field | Type | Description |
|--------------------|-------------|---------------------------------------|
| `event.detail` | `number` | Current page index |
-```jsx
+```svelte
console.log(`Current page index: ${event.detail}`)
@@ -165,6 +88,7 @@ It is dispatched on page change
## Slots
### `prev` and `next`
+
They are used for customizing prev and next buttons.
Slot props:
@@ -174,7 +98,7 @@ Slot props:
| `showPrevPage` | `function` | Call it to switch to the previos page |
| `showNextPage` | `function` | Call it to switch to the next page |
-```jsx
+```svelte
@@ -237,6 +163,7 @@ Slot props:
## Methods
### `goTo`
+
Navigates to a page by index. `(pageIndex, options) => Promise`.
Arguments:
@@ -246,7 +173,7 @@ Arguments:
| `pageIndex` | `number` | | Page number |
| `options.animated` | `boolean` | `true` | Should it be animated or not |
-```jsx
+```svelte