Remove slides
This commit is contained in:
@@ -2,13 +2,6 @@
|
||||
// TODO: rename image carousel to just carousel
|
||||
import { onDestroy, onMount } from 'svelte'
|
||||
import { store } from '../store'
|
||||
import {
|
||||
getPageIndex,
|
||||
getPagesCount,
|
||||
getSlidesToShowTail,
|
||||
getSlideSize,
|
||||
getIsNotCompletePage
|
||||
} from '../utils/size'
|
||||
import Dots from '../Dots/Dots.svelte'
|
||||
import Arrow from '../Arrow/Arrow.svelte'
|
||||
import { NEXT, PREV } from '../direction'
|
||||
@@ -33,11 +26,6 @@
|
||||
*/
|
||||
export let infinite = true
|
||||
|
||||
/**
|
||||
* Number of slides to show at a time
|
||||
*/
|
||||
export let slidesToShow = 1
|
||||
|
||||
/**
|
||||
* Page to start on
|
||||
*/
|
||||
@@ -50,7 +38,7 @@
|
||||
let _speed = speed
|
||||
|
||||
/**
|
||||
* Enables auto play of slides
|
||||
* Enables auto play of pages
|
||||
*/
|
||||
export let autoplay = false
|
||||
|
||||
@@ -82,20 +70,15 @@
|
||||
currentPageIndex = value.currentPageIndex
|
||||
})
|
||||
|
||||
function applySlideSizes() {
|
||||
function applyPageSizes() {
|
||||
const children = pagesElement ? pagesElement.children : []
|
||||
pageWidth = pageWindowElement.clientWidth
|
||||
|
||||
const slidesCount = children.length
|
||||
pagesCount = getPagesCount({ slidesCount, slidesToShow })
|
||||
const slidesToShowTail = getSlidesToShowTail({ pagesCount, slidesToShow, slidesCount })
|
||||
pagesCount = children.length
|
||||
|
||||
for (let slideIndex=0; slideIndex<slidesCount; slideIndex++) {
|
||||
const pageIndex = getPageIndex({ slideIndex, slidesToShow })
|
||||
const isNotCompletePage = getIsNotCompletePage({ pageIndex, pagesCount })
|
||||
const slideSizePx = getSlideSize({ isNotCompletePage, pageWidth, slidesToShow, slidesToShowTail })
|
||||
children[slideIndex].style.minWidth = `${slideSizePx}px`
|
||||
children[slideIndex].style.maxWidth = `${slideSizePx}px`
|
||||
for (let pageIndex=0; pageIndex<pagesCount; pageIndex++) {
|
||||
children[pageIndex].style.minWidth = `${pageWidth}px`
|
||||
children[pageIndex].style.maxWidth = `${pageWidth}px`
|
||||
}
|
||||
}
|
||||
|
||||
@@ -122,15 +105,15 @@
|
||||
|
||||
onMount(() => {
|
||||
infinite && addClones()
|
||||
applySlideSizes()
|
||||
applyPageSizes()
|
||||
store.init(initialPageIndex + Number(infinite))
|
||||
offsetPage(false)
|
||||
|
||||
const { teardownAutoplay } = applyAutoplay()
|
||||
|
||||
addResizeEventListener(applySlideSizes)
|
||||
addResizeEventListener(applyPageSizes)
|
||||
return () => {
|
||||
removeResizeEventListener(applySlideSizes)
|
||||
removeResizeEventListener(applyPageSizes)
|
||||
teardownAutoplay()
|
||||
}
|
||||
})
|
||||
|
||||
@@ -12,11 +12,6 @@
|
||||
*/
|
||||
export let infinite = true;
|
||||
|
||||
/**
|
||||
* Number of slides to show at a time
|
||||
*/
|
||||
export let slidesToShow = 1;
|
||||
|
||||
/**
|
||||
* Page to start on
|
||||
*/
|
||||
@@ -28,7 +23,7 @@
|
||||
export let speed = 500
|
||||
|
||||
/**
|
||||
* Enables auto play of slides
|
||||
* Enables auto play of pages
|
||||
*/
|
||||
export let autoplay = false
|
||||
|
||||
@@ -65,7 +60,6 @@
|
||||
<Carousel
|
||||
{arrows}
|
||||
{infinite}
|
||||
{slidesToShow}
|
||||
{initialPageIndex}
|
||||
{speed}
|
||||
{autoplay}
|
||||
|
||||
@@ -12,11 +12,6 @@
|
||||
*/
|
||||
export let infinite = true;
|
||||
|
||||
/**
|
||||
* Number of slides to show at a time
|
||||
*/
|
||||
export let slidesToShow = 1;
|
||||
|
||||
/**
|
||||
* Page to start on
|
||||
*/
|
||||
@@ -28,7 +23,7 @@
|
||||
export let speed = 500
|
||||
|
||||
/**
|
||||
* Enables auto play of slides
|
||||
* Enables auto play of pages
|
||||
*/
|
||||
export let autoplay = false
|
||||
|
||||
@@ -65,7 +60,6 @@
|
||||
<Carousel
|
||||
{arrows}
|
||||
{infinite}
|
||||
{slidesToShow}
|
||||
{initialPageIndex}
|
||||
{speed}
|
||||
{autoplay}
|
||||
|
||||
@@ -12,11 +12,6 @@
|
||||
*/
|
||||
export let infinite = true;
|
||||
|
||||
/**
|
||||
* Number of slides to show at a time
|
||||
*/
|
||||
export let slidesToShow = 1;
|
||||
|
||||
/**
|
||||
* Page to start on
|
||||
*/
|
||||
@@ -28,7 +23,7 @@
|
||||
export let speed = 500
|
||||
|
||||
/**
|
||||
* Enables auto play of slides
|
||||
* Enables auto play of pages
|
||||
*/
|
||||
export let autoplay = false
|
||||
|
||||
@@ -69,7 +64,6 @@
|
||||
<Carousel
|
||||
{arrows}
|
||||
{infinite}
|
||||
{slidesToShow}
|
||||
{initialPageIndex}
|
||||
{speed}
|
||||
{autoplay}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { writable } from 'svelte/store';
|
||||
import { getNextPageIndexFn, getPrevPageIndexFn } from './utils/page-index'
|
||||
import { getNextPageIndexFn, getPrevPageIndexFn } from './utils/page'
|
||||
|
||||
const initState = {
|
||||
currentPageIndex: 0,
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
Reference in New Issue
Block a user