Remove slides

This commit is contained in:
Vadim
2021-01-23 17:02:57 +03:00
parent c2c0ad495d
commit 56c3d2872f
7 changed files with 13 additions and 81 deletions

View File

@@ -2,13 +2,6 @@
// TODO: rename image carousel to just carousel // TODO: rename image carousel to just carousel
import { onDestroy, onMount } from 'svelte' import { onDestroy, onMount } from 'svelte'
import { store } from '../store' import { store } from '../store'
import {
getPageIndex,
getPagesCount,
getSlidesToShowTail,
getSlideSize,
getIsNotCompletePage
} from '../utils/size'
import Dots from '../Dots/Dots.svelte' import Dots from '../Dots/Dots.svelte'
import Arrow from '../Arrow/Arrow.svelte' import Arrow from '../Arrow/Arrow.svelte'
import { NEXT, PREV } from '../direction' import { NEXT, PREV } from '../direction'
@@ -33,11 +26,6 @@
*/ */
export let infinite = true export let infinite = true
/**
* Number of slides to show at a time
*/
export let slidesToShow = 1
/** /**
* Page to start on * Page to start on
*/ */
@@ -50,7 +38,7 @@
let _speed = speed let _speed = speed
/** /**
* Enables auto play of slides * Enables auto play of pages
*/ */
export let autoplay = false export let autoplay = false
@@ -82,20 +70,15 @@
currentPageIndex = value.currentPageIndex currentPageIndex = value.currentPageIndex
}) })
function applySlideSizes() { function applyPageSizes() {
const children = pagesElement ? pagesElement.children : [] const children = pagesElement ? pagesElement.children : []
pageWidth = pageWindowElement.clientWidth pageWidth = pageWindowElement.clientWidth
const slidesCount = children.length pagesCount = children.length
pagesCount = getPagesCount({ slidesCount, slidesToShow })
const slidesToShowTail = getSlidesToShowTail({ pagesCount, slidesToShow, slidesCount })
for (let slideIndex=0; slideIndex<slidesCount; slideIndex++) { for (let pageIndex=0; pageIndex<pagesCount; pageIndex++) {
const pageIndex = getPageIndex({ slideIndex, slidesToShow }) children[pageIndex].style.minWidth = `${pageWidth}px`
const isNotCompletePage = getIsNotCompletePage({ pageIndex, pagesCount }) children[pageIndex].style.maxWidth = `${pageWidth}px`
const slideSizePx = getSlideSize({ isNotCompletePage, pageWidth, slidesToShow, slidesToShowTail })
children[slideIndex].style.minWidth = `${slideSizePx}px`
children[slideIndex].style.maxWidth = `${slideSizePx}px`
} }
} }
@@ -122,15 +105,15 @@
onMount(() => { onMount(() => {
infinite && addClones() infinite && addClones()
applySlideSizes() applyPageSizes()
store.init(initialPageIndex + Number(infinite)) store.init(initialPageIndex + Number(infinite))
offsetPage(false) offsetPage(false)
const { teardownAutoplay } = applyAutoplay() const { teardownAutoplay } = applyAutoplay()
addResizeEventListener(applySlideSizes) addResizeEventListener(applyPageSizes)
return () => { return () => {
removeResizeEventListener(applySlideSizes) removeResizeEventListener(applyPageSizes)
teardownAutoplay() teardownAutoplay()
} }
}) })

View File

@@ -12,11 +12,6 @@
*/ */
export let infinite = true; export let infinite = true;
/**
* Number of slides to show at a time
*/
export let slidesToShow = 1;
/** /**
* Page to start on * Page to start on
*/ */
@@ -28,7 +23,7 @@
export let speed = 500 export let speed = 500
/** /**
* Enables auto play of slides * Enables auto play of pages
*/ */
export let autoplay = false export let autoplay = false
@@ -65,7 +60,6 @@
<Carousel <Carousel
{arrows} {arrows}
{infinite} {infinite}
{slidesToShow}
{initialPageIndex} {initialPageIndex}
{speed} {speed}
{autoplay} {autoplay}

View File

@@ -12,11 +12,6 @@
*/ */
export let infinite = true; export let infinite = true;
/**
* Number of slides to show at a time
*/
export let slidesToShow = 1;
/** /**
* Page to start on * Page to start on
*/ */
@@ -28,7 +23,7 @@
export let speed = 500 export let speed = 500
/** /**
* Enables auto play of slides * Enables auto play of pages
*/ */
export let autoplay = false export let autoplay = false
@@ -65,7 +60,6 @@
<Carousel <Carousel
{arrows} {arrows}
{infinite} {infinite}
{slidesToShow}
{initialPageIndex} {initialPageIndex}
{speed} {speed}
{autoplay} {autoplay}

View File

@@ -12,11 +12,6 @@
*/ */
export let infinite = true; export let infinite = true;
/**
* Number of slides to show at a time
*/
export let slidesToShow = 1;
/** /**
* Page to start on * Page to start on
*/ */
@@ -28,7 +23,7 @@
export let speed = 500 export let speed = 500
/** /**
* Enables auto play of slides * Enables auto play of pages
*/ */
export let autoplay = false export let autoplay = false
@@ -69,7 +64,6 @@
<Carousel <Carousel
{arrows} {arrows}
{infinite} {infinite}
{slidesToShow}
{initialPageIndex} {initialPageIndex}
{speed} {speed}
{autoplay} {autoplay}

View File

@@ -1,5 +1,5 @@
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
import { getNextPageIndexFn, getPrevPageIndexFn } from './utils/page-index' import { getNextPageIndexFn, getPrevPageIndexFn } from './utils/page'
const initState = { const initState = {
currentPageIndex: 0, currentPageIndex: 0,

View File

@@ -1,33 +0,0 @@
export function getPagesCount({ slidesCount, slidesToShow }) {
return Math.ceil(slidesCount/slidesToShow)
}
export function getSlidesToShowTail({
slidesToShow,
slidesCount,
pagesCount
}) {
return slidesCount - slidesToShow * (pagesCount - 1)
}
export function getIsNotCompletePage({
pageIndex,
pagesCount,
}) {
return pageIndex === pagesCount - 1 && pagesCount !== 1
}
export function getSlideSize({
pageWidth,
slidesToShow,
slidesToShowTail,
isNotCompletePage
}) {
return isNotCompletePage
? Math.round(pageWidth/slidesToShowTail)
: Math.round(pageWidth/slidesToShow)
}
export function getPageIndex({ slideIndex, slidesToShow }) {
return Math.floor(slideIndex/slidesToShow)
}