public/svelte-carousel
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

#48 : Fix typos

Browse Source
This commit is contained in:
Vadim
2021-08-14 19:24:00 +03:00
parent 112154a8f3
commit 31a145153e
2 changed files with 12 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
README.md
View File

@@ -14,7 +14,6 @@
The awesome carousel component for Svelte 3 The awesome carousel component for Svelte 3
## Demo ## Demo
* [vadimkorr.github.io/svelte-carousel](https://vadimkorr.github.io/svelte-carousel) * [vadimkorr.github.io/svelte-carousel](https://vadimkorr.github.io/svelte-carousel)
* [REPL](https://svelte.dev/repl/f503a458832f4a358d9ec00f88945ff5) * [REPL](https://svelte.dev/repl/f503a458832f4a358d9ec00f88945ff5)
@@ -35,7 +34,6 @@ Import component
``` ```
## SvelteKit support ## 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). 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) 1. Install `svelte-carousel` as a dev dependency. [Why as a dev dependency?](https://github.com/sveltejs/sapper-template#using-external-components)
@@ -81,23 +79,23 @@ npm install svelte-carousel -D
## Props ## Props
| Prop | Type | Default | Description | | Prop | Type | Default | Description |
|---------------------------|------------|-----------------|-----------------------------------------------| |---------------------------|------------|-----------------|-----------------------------------------------|
| `arrows` | `boolean` | `true` | Enable Next/Prev arrows | | `arrows` | `boolean` | `true` | Enables next/prev arrows |
| `infinite` | `boolean` | `true` | Infinite looping | | `infinite` | `boolean` | `true` | Infinite looping |
| `initialPageIndex` | `number` | `0` | Page to start on | | `initialPageIndex` | `number` | `0` | Page to start on |
| `duration` | `number` | `500` | Transition duration (ms) | | `duration` | `number` | `500` | Transition duration (ms) |
| `autoplay` | `boolean` | `false` | Enables auto play of pages | | `autoplay` | `boolean` | `false` | Enables autoplay of pages |
| `autoplayDuration` | `number` | `3000` | Autoplay change interval (ms) | | `autoplayDuration` | `number` | `3000` | Autoplay change interval (ms) |
| `autoplayDirection` | `string` | `'next'` | Autoplay change direction (`next` or `prev`) | | `autoplayDirection` | `string` | `'next'` | Autoplay change direction (`next` or `prev`) |
| `pauseOnFocus` | `boolean` | `false` | Pauses autoplay on focus (for desktop - hover over the carousel to toggle the autoplay, for touchable devices - tap the carousel to toggle the autoplay) | | `pauseOnFocus` | `boolean` | `false` | Pauses autoplay on focus (for desktop - hover over the carousel to toggle the autoplay, for touchable devices - tap the carousel to toggle the autoplay) |
| `autoplayProgressVisible` | `boolean` | `false` | Show autoplay duration progress indicator | | `autoplayProgressVisible` | `boolean` | `false` | Shows autoplay duration progress indicator |
| `dots` | `boolean` | `true` | Current page indicator dots | | `dots` | `boolean` | `true` | Current page indicator dots |
| `timingFunction` | `string` | `'ease-in-out'` | CSS animation timing function | | `timingFunction` | `string` | `'ease-in-out'` | CSS animation timing function |
| `swiping` | `boolean` | `true` | Enable swiping | | `swiping` | `boolean` | `true` | Enables swiping |
## Events ## Events
### `pageChange` ### `pageChange`
Is dispatched on page change It is dispatched on page change
| Payload field | Type | Description | | Payload field | Type | Description |
|--------------------|-------------|---------------------------------------| |--------------------|-------------|---------------------------------------|
@@ -141,8 +139,7 @@ Slot props:
``` ```
### `dots` ### `dots`
This slot is used for customizing how dots look like.
This slot is used for customizing dots appearance.
Slot props: Slot props:
@@ -166,7 +163,6 @@ Slot props:
``` ```
### Default slot ### Default slot
This slot takes content for the carousel. This slot takes content for the carousel.
Slot props: Slot props:

17
src/docs/Carousel.svx
View File

@@ -102,7 +102,6 @@
<Divider /> <Divider />
## Autoplay with pause on focus!anchorId:features-autoplay-pause-on-focus; ## Autoplay with pause on focus!anchorId:features-autoplay-pause-on-focus;
**For desktop** - hover over the carousel to toggle the autoplay. **For desktop** - hover over the carousel to toggle the autoplay.
**For touchable devices** - tap the carousel to toggle the autoplay. **For touchable devices** - tap the carousel to toggle the autoplay.
@@ -245,7 +244,6 @@
<Divider /> <Divider />
# Installation!anchorId:installation; # Installation!anchorId:installation;
```bash ```bash
yarn add svelte-carousel yarn add svelte-carousel
``` ```
@@ -253,7 +251,7 @@ yarn add svelte-carousel
npm install svelte-carousel npm install svelte-carousel
``` ```
Import component Import component:
```jsx ```jsx
<script> <script>
import Carousel from 'svelte-carousel' import Carousel from 'svelte-carousel'
@@ -264,10 +262,9 @@ Import component
<Divider /> <Divider />
# Props!anchorId:props; # Props!anchorId:props;
| Prop | Type | Default | Description | | Prop | Type | Default | Description |
|---------------------------|------------|-----------------|-----------------------------------------------| |---------------------------|------------|-----------------|-----------------------------------------------|
| `arrows` | `boolean` | `true` | Enable Next/Prev arrows | | `arrows` | `boolean` | `true` | Enables next/prev arrows |
| `infinite` | `boolean` | `true` | Infinite looping | | `infinite` | `boolean` | `true` | Infinite looping |
| `initialPageIndex` | `number` | `0` | Page to start on | | `initialPageIndex` | `number` | `0` | Page to start on |
| `duration` | `number` | `500` | Transition duration (ms) | | `duration` | `number` | `500` | Transition duration (ms) |
@@ -275,17 +272,17 @@ Import component
| `autoplayDuration` | `number` | `3000` | Autoplay change interval (ms) | | `autoplayDuration` | `number` | `3000` | Autoplay change interval (ms) |
| `autoplayDirection` | `string` | `'next'` | Autoplay change direction (`next` or `prev`) | | `autoplayDirection` | `string` | `'next'` | Autoplay change direction (`next` or `prev`) |
| `pauseOnFocus` | `boolean` | `false` | Pauses autoplay on focus (for desktop - hover over the carousel to toggle the autoplay, for touchable devices - tap the carousel to toggle the autoplay) | | `pauseOnFocus` | `boolean` | `false` | Pauses autoplay on focus (for desktop - hover over the carousel to toggle the autoplay, for touchable devices - tap the carousel to toggle the autoplay) |
| `autoplayProgressVisible` | `boolean` | `false` | Show autoplay duration progress indicator | | `autoplayProgressVisible` | `boolean` | `false` | Shows autoplay duration progress indicator |
| `dots` | `boolean` | `true` | Current page indicator dots | | `dots` | `boolean` | `true` | Current page indicator dots |
| `timingFunction` | `string` | `'ease-in-out'` | CSS animation timing function | | `timingFunction` | `string` | `'ease-in-out'` | CSS animation timing function |
| `swiping` | `boolean` | `true` | Enable swiping | | `swiping` | `boolean` | `true` | Enables swiping |
<Divider /> <Divider />
# Events!anchorId:events; # Events!anchorId:events;
## pageChange!anchorId:events-page-change; ## pageChange!anchorId:events-page-change;
Is dispatched on page change It is dispatched on page change.
| Payload field | Type | Description | | Payload field | Type | Description |
|--------------------|-------------|---------------------------------------| |--------------------|-------------|---------------------------------------|
@@ -331,8 +328,7 @@ Slot props:
``` ```
## dots!anchorId:slots-dots; ## dots!anchorId:slots-dots;
This slot is used for customizing how dots look like.
This slot is used for customizing dots appearance.
Slot props: Slot props:
@@ -356,7 +352,6 @@ Slot props:
``` ```
## Default slot!anchorId:slots-default; ## Default slot!anchorId:slots-default;
This slot takes content for the carousel. This slot takes content for the carousel.
Slot props: Slot props: