Describe usage with SvelteKit
This commit is contained in:
45
README.md
45
README.md
@@ -34,6 +34,51 @@ Import component
|
|||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## SvelteKit support
|
||||||
|
|
||||||
|
There are several things to keep in mind when 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. Import and use it:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
|
let Carousel; // for saving Carousel component class
|
||||||
|
let carousel; // for calling methods of 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>
|
||||||
|
```
|
||||||
|
|
||||||
## Props
|
## Props
|
||||||
| Prop | Type | Default | Description |
|
| Prop | Type | Default | Description |
|
||||||
|---------------------------|------------|-----------------|-----------------------------------------------|
|
|---------------------------|------------|-----------------|-----------------------------------------------|
|
||||||
|
|||||||
Reference in New Issue
Block a user