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

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

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

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

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

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

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

16
src/docs/Carousel.svx
View File

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