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

Update docs

Browse Source
This commit is contained in:
Vadim
2021-03-20 19:08:28 +03:00
parent db649e0074
commit f29aedd479
9 changed files with 51 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Carousel/Carousel.svelte
View File

@@ -18,7 +18,10 @@
[PREV]: showPrevPage
}
export let timingFunction = "ease-in-out";
/**
* CSS animation timing function
*/
export let timingFunction = 'ease-in-out';
/**
* Enable Next/Prev arrows

6
src/components/Carousel/CarouselView.svelte
View File

@@ -2,6 +2,11 @@
import Carousel from './Carousel.svelte'
import { NEXT } from '../../direction'
/**
* CSS animation timing function
*/
export let timingFunction = "ease-in-out";
/**
* Enable Next/Previos arrows
*/
@@ -72,6 +77,7 @@
{autoplayDuration}
{autoplayDirection}
{dots}
{timingFunction}
on:pageChange={
event => console.log(`Current page index: ${event.detail}`)
}

6
src/components/Carousel/CarouselViewCustomArrows.svelte
View File

@@ -2,6 +2,11 @@
import Carousel from './Carousel.svelte'
import { NEXT } from '../../direction'
/**
* CSS animation timing function
*/
export let timingFunction = "ease-in-out";
/**
* Enable Next/Previos arrows
*/
@@ -66,6 +71,7 @@
{autoplayDuration}
{autoplayDirection}
{dots}
{timingFunction}
let:showPrevPage
let:showNextPage
>

6
src/components/Carousel/CarouselViewCustomDots.svelte
View File

@@ -2,6 +2,11 @@
import Carousel from './Carousel.svelte'
import { NEXT } from '../../direction'
/**
* CSS animation timing function
*/
export let timingFunction = "ease-in-out";
/**
* Enable Next/Previos arrows
*/
@@ -70,6 +75,7 @@
{autoplayDuration}
{autoplayDirection}
{dots}
{timingFunction}
let:currentPageIndex
let:pagesCount
let:showPage

23
src/docs/Carousel.svx
View File

@@ -76,7 +76,7 @@
<Divider />
## Lazy loading
## Lazy loading of images
<Carousel
let:loaded
>
@@ -204,16 +204,17 @@ Import component and styles in App component
# Props
<div class="table-wrapper">
| Prop | Type | Default | Description |
|----------------------|------------|-------------|-----------------------------------------------|
| `arrows` | `boolean` | `true` | Enable 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 auto play of pages |
| `autoplayDuration` | `number` | `3000` | Auto play change interval (ms) |
| `autoplayDirection` | `string` | `'next'` | Auto play change direction (`next` or `prev`) |
| `dots` | `boolean` | `true` | Current page indicator dots |
| Prop | Type | Default | Description |
|----------------------|------------|-----------------|-----------------------------------------------|
| `arrows` | `boolean` | `true` | Enable 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 auto play of pages |
| `autoplayDuration` | `number` | `3000` | Auto play change interval (ms) |
| `autoplayDirection` | `string` | `'next'` | Auto play change direction (`next` or `prev`) |
| `dots` | `boolean` | `true` | Current page indicator dots |
| `timingFunction` | `string` | `'ease-in-out'` | CSS animation timing function |
</div>