diff --git a/src/ImageCarousel.svelte b/src/ImageCarousel.svelte index 479488c..46b45ec 100644 --- a/src/ImageCarousel.svelte +++ b/src/ImageCarousel.svelte @@ -46,6 +46,11 @@ */ export let autoplaySpeed = 3000 + /** + * Auto play change direction ('next', 'prev') + */ + export let autoplayDirection = 'next' + let pagesCount = 0 let contentContainerWidth = 0 let offset @@ -67,14 +72,18 @@ children[slideIndex].style.minWidth = `${slideSizePx}px` children[slideIndex].style.maxWidth = `${slideSizePx}px` } - moveToPage(initialPage) + showPage(initialPage) } function applyAutoplay() { + const autoplayDirectionFnDescription = { + 'next': showNextPage, + 'prev': showPrevPage + } let interval if (autoplay) { interval = setInterval(() => { - showNextPage() + autoplayDirectionFnDescription[autoplayDirection]() }, autoplaySpeed) } return { @@ -97,15 +106,14 @@ } }) - function moveToPage(pageIndex) { - store.moveToPage({ pageIndex, pagesCount }) - applyOffset() - } - function applyOffset() { offset = -$store.currentItemIndex * contentContainerWidth } + function showPage(pageIndex) { + store.moveToPage({ pageIndex, pagesCount }) + applyOffset() + } function showPrevPage() { store.prev({ infinite, pagesCount }) applyOffset() diff --git a/src/stories/ImageCarouselView.svelte b/src/stories/ImageCarouselView.svelte index 7449d36..a4de909 100644 --- a/src/stories/ImageCarouselView.svelte +++ b/src/stories/ImageCarouselView.svelte @@ -36,6 +36,11 @@ */ export let autoplaySpeed = 3000 + /** + * Auto play change direction ('next', 'prev') + */ + export let autoplayDirection = 'next' + const colors = [ '#e5f9f0', '#ccf3e2', @@ -59,6 +64,7 @@ {speed} {autoplay} {autoplaySpeed} + {autoplayDirection} > {#each colors as color (color)}