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

Rename speed => duration

Browse Source
This commit is contained in:
Vadim
2021-01-27 23:34:24 +03:00
parent 3a5fabd4d5
commit e2603c3b7e
5 changed files with 35 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,10 +32,10 @@
export let initialPageIndex = 0
/**
* Transition speed (ms)
* Transition duration (ms)
*/
export let speed = 500
let _speed = speed
export let duration = 500
let _duration = duration
/**
* Enables auto play of pages
@@ -45,7 +45,7 @@
/**
* Auto play change interval
*/
export let autoplaySpeed = 3000
export let autoplayDuration = 3000
/**
* Auto play change direction ('next', 'prev')
@@ -90,7 +90,7 @@
if (autoplay) {
interval = setInterval(() => {
directionFnDescription[autoplayDirection]()
}, autoplaySpeed)
}, autoplayDuration)
}
return {
teardownAutoplay: () => {
@@ -134,13 +134,13 @@
}
function offsetPage(animated) {
_speed = animated ? speed : 0
_duration = animated ? duration : 0
offset = -currentPageIndex * pageWidth
if (infinite) {
if (currentPageIndex === 0) {
showPage(pagesCount - 2, { offsetDelay: speed, animated: false })
showPage(pagesCount - 2, { offsetDelay: duration, animated: false })
} else if (currentPageIndex === pagesCount - 1) {
showPage(1, { offsetDelay: speed, animated: false })
showPage(1, { offsetDelay: duration, animated: false })
}
}
}
@@ -162,7 +162,7 @@
// gestures
function handleSwipeStart() {
_speed = 0
_duration = 0
}
function handleThreshold(event) {
directionFnDescription[event.detail.direction]()
@@ -201,7 +201,7 @@
on:threshold={handleThreshold}
style="
transform: translateX({offset}px);
transition-duration: {_speed}ms;
transition-duration: {_duration}ms;
"
bind:this={pagesElement}
>

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

@@ -18,9 +18,9 @@
export let initialPageIndex = 1
/**
* Transition speed (ms)
* Transition duration (ms)
*/
export let speed = 500
export let duration = 500
/**
* Enables auto play of pages
@@ -30,7 +30,7 @@
/**
* Auto play change interval
*/
export let autoplaySpeed = 3000
export let autoplayDuration = 3000
/**
* Auto play change direction ('next', 'prev')
@@ -67,9 +67,9 @@
{arrows}
{infinite}
{initialPageIndex}
{speed}
{duration}
{autoplay}
{autoplaySpeed}
{autoplayDuration}
{autoplayDirection}
{dots}
>
@@ -87,9 +87,9 @@
{arrows}
{infinite}
{initialPageIndex}
{speed}
{duration}
{autoplay}
{autoplaySpeed}
{autoplayDuration}
{autoplayDirection}
{dots}
>

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

@@ -18,9 +18,9 @@
export let initialPageIndex = 1
/**
* Transition speed (ms)
* Transition duration (ms)
*/
export let speed = 500
export let duration = 500
/**
* Enables auto play of pages
@@ -30,7 +30,7 @@
/**
* Auto play change interval
*/
export let autoplaySpeed = 3000
export let autoplayDuration = 3000
/**
* Auto play change direction ('next', 'prev')
@@ -61,9 +61,9 @@
{arrows}
{infinite}
{initialPageIndex}
{speed}
{duration}
{autoplay}
{autoplaySpeed}
{autoplayDuration}
{autoplayDirection}
{dots}
let:showPrevPage

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

@@ -18,9 +18,9 @@
export let initialPageIndex = 1
/**
* Transition speed (ms)
* Transition duration (ms)
*/
export let speed = 500
export let duration = 500
/**
* Enables auto play of pages
@@ -30,7 +30,7 @@
/**
* Auto play change interval
*/
export let autoplaySpeed = 3000
export let autoplayDuration = 3000
/**
* Auto play change direction ('next', 'prev')
@@ -65,9 +65,9 @@
{arrows}
{infinite}
{initialPageIndex}
{speed}
{duration}
{autoplay}
{autoplaySpeed}
{autoplayDuration}
{autoplayDirection}
{dots}
let:currentPageIndex

16
src/docs/Carousel.svx
View File

@@ -56,7 +56,7 @@
## Autoplay
<Carousel
autoplay={true}
autoplaySpeed={2000}
autoplayDuration={2000}
>
{#each colors as { color, text } (color)}
<Color {color} {text} />
@@ -66,7 +66,7 @@
```jsx
<Carousel
autoplay={true}
autoplaySpeed={2000}
autoplayDuration={2000}
>
{#each colors as { color, text } (color)}
<Color {color} {text} />
@@ -207,9 +207,9 @@ Import component and styles in App component
| arrows | boolean | true | Enable Next/Prev arrows |
| infinite | boolean | true | Infinite looping |
| initialPageIndex | number | 0 | Page to start on |
| speed | number | 500 | Transition speed (ms) |
| duration | number | 500 | Transition duration (ms) |
| autoplay | boolean | false | Enables auto play of pages |
| autoplaySpeed | number | 3000 | Auto play change interval |
| autoplayDuration | number | 3000 | Auto play change interval |
| autoplayDirection | string | 3000 | Auto play change direction (`next` or `prev`) |
| dots | boolean | true | Current page indicator dots |
@@ -246,11 +246,11 @@ This slot is used for customizing dots appearance.
Slot props:
| Prop | Type | Description |
|---------------------|---------- --|---------------------------------------------|
| 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 |
| `pagesCount` | `number` | Total pages amount |
| `showPage` | `function` | Takes index as page to be shown |
```jsx
<Carousel