diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte index 9449e16..ef977b9 100644 --- a/src/components/Carousel/Carousel.svelte +++ b/src/components/Carousel/Carousel.svelte @@ -78,10 +78,6 @@ * Page to start on */ export let initialPageIndex = 0 - $: { - console.log('initialPageIndex', initialPageIndex) - data.initialPageIndex = initialPageIndex - } /** * Transition duration (ms) @@ -219,6 +215,8 @@ // call after adding clones data.particlesCount = particlesContainer.children.length + methods.showPage(initialPageIndex, { animated: false }) + pageWindowElementResizeObserver.observe(pageWindowElement); } })() diff --git a/src/components/Carousel/createCarousel.js b/src/components/Carousel/createCarousel.js index 630b541..6013f18 100644 --- a/src/components/Carousel/createCarousel.js +++ b/src/components/Carousel/createCarousel.js @@ -28,7 +28,6 @@ function createCarousel(onChange) { particlesToShowInit: 1, // initial value particlesToScroll: 1, // normalized particlesToScrollInit: 1, // initial value - initialPageIndex: 0, particlesCount: 1, currentParticleIndex: 1, infinite: false, @@ -109,13 +108,6 @@ function createCarousel(onChange) { // to prevent its data added to deps data.autoplay && _applyAutoplayIfNeeded(data.autoplay) }, - setParticlesToShow({ data }) { - data.particlesToShow = getValueInRange( - 1, - data.particlesToShowInit, - data.particlesCountWithoutClones - ) - }, setPagesCount({ data }) { data.pagesCount = getPagesCountByParticlesCount({ infinite: data.infinite, @@ -123,6 +115,13 @@ function createCarousel(onChange) { particlesToScroll: data.particlesToScroll, }) }, + setParticlesToShow({ data }) { + data.particlesToShow = getValueInRange( + 1, + data.particlesToShowInit, + data.particlesCountWithoutClones + ) + }, setParticlesToScroll({ data }) { data.particlesToScroll = getValueInRange( 1, @@ -130,17 +129,10 @@ function createCarousel(onChange) { data.particlesCountWithoutClones ) }, - setInitialPageIndex({ data, methods: { showPage } }) { - const ind = getValueInRange(0, data.initialPageIndex, data.pagesCount) - console.log('ind', data.initialPageIndex, ind) - showPage(5, { - animated: false, - }) - }, }, methods: { _prev({ data }) { - const newCurrentParticleIndex = getParticleIndexByPageIndex({ + data.currentParticleIndex = getParticleIndexByPageIndex({ infinite: data.infinite, pageIndex: data.currentPageIndex - 1, clonesCountHead: data.clonesCountHead, @@ -149,10 +141,9 @@ function createCarousel(onChange) { particlesCount: data.particlesCount, particlesToShow: data.particlesToShow, }) - data.currentParticleIndex = newCurrentParticleIndex }, _next({ data }) { - const newCurrentParticleIndex = getParticleIndexByPageIndex({ + data.currentParticleIndex = getParticleIndexByPageIndex({ infinite: data.infinite, pageIndex: data.currentPageIndex + 1, clonesCountHead: data.clonesCountHead, @@ -161,15 +152,13 @@ function createCarousel(onChange) { particlesCount: data.particlesCount, particlesToShow: data.particlesToShow, }) - data.currentParticleIndex = newCurrentParticleIndex }, _moveToParticle({ data }, particleIndex) { - const newCurrentParticleIndex = getValueInRange( + data.currentParticleIndex = getValueInRange( 0, particleIndex, data.particlesCount - 1 ) - data.currentParticleIndex = newCurrentParticleIndex }, toggleFocused({ data }) { data.focused = !data.focused @@ -247,8 +236,8 @@ function createCarousel(onChange) { options ) }, - async showPage({ data, methods }, pageIndex, options) { - const ind = getParticleIndexByPageIndex({ + _getParticleIndexByPageIndex({ data }, pageIndex) { + return getParticleIndexByPageIndex({ infinite: data.infinite, pageIndex, clonesCountHead: data.clonesCountHead, @@ -257,8 +246,10 @@ function createCarousel(onChange) { particlesCount: data.particlesCount, particlesToShow: data.particlesToShow, }) - console.log('ParticleIndex', ind) - await methods.showParticle(ind, options) + }, + async showPage({ methods }, pageIndex, options) { + const particleIndex = methods._getParticleIndexByPageIndex(pageIndex) + await methods.showParticle(particleIndex, options) }, offsetPage({ data }, options) { const animated = get(options, 'animated', true)