Add autoplayDirection

This commit is contained in:
Vadim
2021-01-21 20:31:03 +03:00
parent 5d415d6229
commit bb590515cb
2 changed files with 21 additions and 7 deletions

View File

@@ -46,6 +46,11 @@
*/ */
export let autoplaySpeed = 3000 export let autoplaySpeed = 3000
/**
* Auto play change direction ('next', 'prev')
*/
export let autoplayDirection = 'next'
let pagesCount = 0 let pagesCount = 0
let contentContainerWidth = 0 let contentContainerWidth = 0
let offset let offset
@@ -67,14 +72,18 @@
children[slideIndex].style.minWidth = `${slideSizePx}px` children[slideIndex].style.minWidth = `${slideSizePx}px`
children[slideIndex].style.maxWidth = `${slideSizePx}px` children[slideIndex].style.maxWidth = `${slideSizePx}px`
} }
moveToPage(initialPage) showPage(initialPage)
} }
function applyAutoplay() { function applyAutoplay() {
const autoplayDirectionFnDescription = {
'next': showNextPage,
'prev': showPrevPage
}
let interval let interval
if (autoplay) { if (autoplay) {
interval = setInterval(() => { interval = setInterval(() => {
showNextPage() autoplayDirectionFnDescription[autoplayDirection]()
}, autoplaySpeed) }, autoplaySpeed)
} }
return { return {
@@ -97,15 +106,14 @@
} }
}) })
function moveToPage(pageIndex) {
store.moveToPage({ pageIndex, pagesCount })
applyOffset()
}
function applyOffset() { function applyOffset() {
offset = -$store.currentItemIndex * contentContainerWidth offset = -$store.currentItemIndex * contentContainerWidth
} }
function showPage(pageIndex) {
store.moveToPage({ pageIndex, pagesCount })
applyOffset()
}
function showPrevPage() { function showPrevPage() {
store.prev({ infinite, pagesCount }) store.prev({ infinite, pagesCount })
applyOffset() applyOffset()

View File

@@ -36,6 +36,11 @@
*/ */
export let autoplaySpeed = 3000 export let autoplaySpeed = 3000
/**
* Auto play change direction ('next', 'prev')
*/
export let autoplayDirection = 'next'
const colors = [ const colors = [
'#e5f9f0', '#e5f9f0',
'#ccf3e2', '#ccf3e2',
@@ -59,6 +64,7 @@
{speed} {speed}
{autoplay} {autoplay}
{autoplaySpeed} {autoplaySpeed}
{autoplayDirection}
> >
{#each colors as color (color)} {#each colors as color (color)}
<div <div