diff --git a/src/components/Carousel/Carousel.ts b/src/components/Carousel/Carousel.ts index b3ac8bab..eb72b170 100644 --- a/src/components/Carousel/Carousel.ts +++ b/src/components/Carousel/Carousel.ts @@ -35,6 +35,7 @@ import { mapNumberToRange, getScrolledIndex, getTransformValues, + getSlidesVNodes, } from '@/utils' import { @@ -171,7 +172,7 @@ export const Carousel = defineComponent({ if (config.height !== 'auto') { const height = typeof config.height === 'string' && isNaN(parseInt(config.height)) - ? viewport.value.getBoundingClientRect().height + ? viewport.value.getBoundingClientRect().height : parseInt(config.height as string) slideSize.value = (height - totalGap.value) / config.itemsToShow @@ -665,16 +666,18 @@ export const Carousel = defineComponent({ if (config.wrapAround) { const toShow = Math.ceil(clonedSlidesCount.value) - const slidesBefore = slides.slice(-toShow).map(({ vnode }, index: number) => + const outputSlides = getSlidesVNodes(output) + + const slidesBefore = outputSlides.slice(-toShow).map((vnode, index: number) => cloneVNode(vnode, { - index: -slides.length + toShow + index, + index: -toShow + index, isClone: true, key: `clone-before-${String(vnode.key)}`, }) ) - const slidesAfter = slides.slice(0, toShow).map(({ vnode }, index: number) => + const slidesAfter = outputSlides.slice(0, toShow).map((vnode, index: number) => cloneVNode(vnode, { - index: slides.length + index, + index: outputSlides.length + index, isClone: true, key: `clone-after-${String(vnode.key)}`, }) diff --git a/src/utils/getSlidesVNodes.ts b/src/utils/getSlidesVNodes.ts new file mode 100644 index 00000000..ec102706 --- /dev/null +++ b/src/utils/getSlidesVNodes.ts @@ -0,0 +1,17 @@ +import { Fragment, VNode } from 'vue' + +export function getSlidesVNodes(vNode?: any[]): Array { + if (!vNode) return [] + + return vNode.reduce((acc, node) => { + if (node.type === Fragment) { + return [...acc, ...getSlidesVNodes(node.children)] + } + + if (node.type?.name === 'CarouselSlide') { + return [...acc, node] + } + + return acc + }, []) +} diff --git a/src/utils/index.ts b/src/utils/index.ts index 35394bc7..e25874a3 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -6,3 +6,4 @@ export * from './mapNumberToRange' export * from './i18nFormatter' export * from './throttle' export * from './getTransformValues' +export * from './getSlidesVNodes'