diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte index 4ab0c61..ab2c14b 100644 --- a/src/components/Carousel/Carousel.svelte +++ b/src/components/Carousel/Carousel.svelte @@ -17,7 +17,7 @@ import { ProgressManager } from '../../utils/ProgressManager' import { wait } from '../../utils/interval' - const CLONES_COUNT = 2 + const dispatch = createEventDispatcher() @@ -96,6 +96,16 @@ */ export let swiping = true + /** + * Number of pages to show + */ + export let pagesToShow = 2 + + /** + * Number of pages to scroll + */ + export let pagesToScroll = 2 + export async function goTo(pageIndex, options) { const animated = get(options, 'animated', true) if (typeof pageIndex !== 'number') { @@ -119,19 +129,23 @@ $: originalCurrentPageIndex = getOriginalCurrentPageIndex(currentPageIndex, pagesCount, infinite) // index without cloenes $: dispatch('pageChange', originalCurrentPageIndex) + const PAGE_CLONES_COUNT = 2 + $: pagesItemsClonesCount = pagesToShow * 2 let pagesCount = 0 - $: originalPagesCount = Math.max(pagesCount - (infinite ? CLONES_COUNT : 0), 1) // without clones + let pagesItemsCount = 0 + $: originalPagesCount = Math.max(pagesCount - (infinite ? PAGE_CLONES_COUNT : 0), 1) // without clones function getOriginalCurrentPageIndex(currentPageIndex, pagesCount, infinite) { if (infinite) { if (currentPageIndex === pagesCount - 1) return 0 - if (currentPageIndex === 0) return (pagesCount - CLONES_COUNT) - 1 + if (currentPageIndex === 0) return (pagesCount - PAGE_CLONES_COUNT) - 1 return currentPageIndex - 1 } return currentPageIndex } - let pageWidth = 0 + let pagesWindowWidth = 0 + let pagesItemWidth = 0 let offset = 0 let pageWindowElement let pagesElement @@ -160,23 +174,40 @@ function applyPageSizes() { const children = pagesElement.children - pageWidth = pageWindowElement.clientWidth + pagesWindowWidth = pageWindowElement.clientWidth - pagesCount = children.length + pagesItemWidth = pagesWindowWidth / pagesToShow - for (let pageIndex=0; pageIndexlen - 1 - pagesToShow; i--) { + toPrepend.push(pagesElement.children[i].cloneNode(true)) + } + + for (let i=0; i { // _duration is an offset animation time _duration = animated ? duration : 0 - offset = -currentPageIndex * pageWidth + offset = -currentPageIndex * (pagesItemWidth * pagesToScroll) setTimeout(() => { resolve() }, _duration) @@ -245,7 +276,7 @@ let jumped = false if (infinite) { if (currentPageIndex === 0) { - await showPage(pagesCount - CLONES_COUNT, { animated: false }) + await showPage(pagesCount - PAGE_CLONES_COUNT, { animated: false }) jumped = true } else if (currentPageIndex === pagesCount - 1) { await showPage(1, { animated: false }) @@ -344,7 +375,7 @@ >