@bagelink/vue 1.4.14 → 1.4.16

package/src/components/Slider.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { sleep, useDevice } from '@bagelink/vue'
-import { ref, onMounted, onBeforeUnmount, watch, computed, nextTick } from 'vue'
+import { ref, onMounted, onBeforeUnmount, watch, computed, nextTick, onUpdated } from 'vue'
 
 type Easing = 'ease-in-out' | 'ease-in' | 'ease-out' | 'linear'
 type AutoplayMode = 'disabled' | 'standard' | 'linear'
@@ -67,6 +67,9 @@ const { innerWidth } = useDevice()
 const transformProperty = ref('transform')
 const pointerDown = ref(false)
 
+// Add a flag to track if we're in the middle of initializing or rebuilding
+const isBuilding = ref(false)
+
 // Drag-related refs
 const drag = ref<DragState>({
 	startX: 0,
@@ -86,6 +89,10 @@ const linearAnimationFrame = ref<number | null>(null)
 const isHovering = ref(false)
 const linearOffset = ref(0)
 
+// Add a counter to track rebuild attempts with no items
+const emptyRebuildAttempts = ref(0)
+const MAX_EMPTY_REBUILD_ATTEMPTS = 3
+
 // Modified to work with optional parameters and ensure compatibility with Required type
 type ComputedConfig = Omit<Required<CarouselOptions>, 'autoplay'> & { autoplay: AutoplayMode }
 
@@ -146,12 +153,67 @@ const totalDots = computed(() => {
 	return config.value.loop ? innerElements.value.length : Math.ceil(innerElements.value.length - perPage.value + 1)
 })
 
+// Add a flag to track slot updates
+const slotHasChanged = ref(false)
+
+// Add MutationObserver ref
+const slotObserver = ref<MutationObserver | null>(null)
+
+// Add a flag to track component mounted state
+const isMounted = ref(false)
+
+// Add a reference to the slot container
+const slotContainer = ref<HTMLDivElement | null>(null)
+
 // Lifecycle hooks
-onMounted(() => init())
+onMounted(() => {
+	// Set the mounted flag first
+	isMounted.value = true
+
+	// Wait a tick to ensure slot content is rendered
+	nextTick(() => {
+		init()
+	})
+})
 
 onBeforeUnmount(() => {
+	// Clean up
+	isMounted.value = false
 	stopAutoplay()
 	detachEvents()
+
+	// Remove the observer
+	if (slotObserver.value) {
+		slotObserver.value.disconnect()
+		slotObserver.value = null
+	}
+
+	// Clear DOM content
+	if (carouselRef.value) {
+		carouselRef.value.innerHTML = ''
+	}
+})
+
+// Add an onUpdated hook that checks for slot content changes
+onUpdated(() => {
+	// Only check if we're already initialized
+	if (isMounted.value && !isBuilding.value && emptyRebuildAttempts.value < MAX_EMPTY_REBUILD_ATTEMPTS) {
+		// Check if slot content changed
+		if (slotContainer.value) {
+			const slotElements = Array.from(slotContainer.value.children)
+
+			// Only update if count changed or first initialization
+			if (slotElements.length !== innerElements.value.length || innerElements.value.length === 0) {
+				// Clone the elements from slot
+				innerElements.value = slotElements.map(el => el.cloneNode(true) as Element)
+
+				// Schedule rebuild
+				nextTick(() => {
+					updateSlider()
+				})
+			}
+		}
+	}
 })
 
 // Watch for changes to props
@@ -224,15 +286,17 @@ function detachEvents(): void {
 
 // Core functionality
 async function init(): Promise<void> {
-	if (!carouselRef.value) return
+	if (!carouselRef.value || !slotContainer.value || !isMounted.value) return
 
 	transformProperty.value = webkitOrNot()
 
 	// Add a small delay to ensure DOM is ready
 	await sleep(10)
 
-	// Create references
-	innerElements.value = Array.from(carouselRef.value.children)
+	// Create references by cloning slot content
+	innerElements.value = Array.from(slotContainer.value.children).map(
+		el => el.cloneNode(true) as Element
+	)
 
 	if (!innerElements.value.length) {
 		console.warn('No carousel items found during initialization')
@@ -255,7 +319,8 @@ async function init(): Promise<void> {
 	// Attach events
 	attachEvents()
 
-	await nextTick()
+	// Set up the MutationObserver to watch for slot changes
+	setupSlotObserver()
 
 	// Build slider frame
 	buildSliderFrame()
@@ -270,75 +335,171 @@ async function init(): Promise<void> {
 }
 
 function buildSliderFrame(): void {
-	if (!carouselRef.value) return
+	if (!carouselRef.value || !isMounted.value) return
 
-	// Ensure we have elements to build the slider
-	if (!innerElements.value.length) {
-		console.warn('No carousel items found')
-		return
-	}
+	// Set building flag to prevent interactions during rebuild
+	isBuilding.value = true
 
-	const widthItem = selectorWidth.value / perPage.value
-	const itemsToBuild = config.value.loop
-		? innerElements.value.length + (2 * perPage.value)
-		: innerElements.value.length
+	try {
+		// Ensure we have elements to build the slider
+		if (!innerElements.value.length) {
+			console.warn('No carousel items found')
+			emptyRebuildAttempts.value++
+			isBuilding.value = false
+			return
+		}
 
-	// Create frame
-	if (!sliderFrame.value) {
-		sliderFrame.value = document.createElement('div')
-	}
+		// Reset counter since we have elements
+		emptyRebuildAttempts.value = 0
 
-	sliderFrame.value.style.width = `${widthItem * itemsToBuild}px`
-	enableTransition()
+		const originalCount = innerElements.value.length
+		const widthItem = selectorWidth.value / perPage.value
+		const itemsToBuild = config.value.loop
+			? originalCount + (2 * perPage.value)
+			: originalCount
 
-	if (config.value.draggable && carouselRef.value) {
-		carouselRef.value.style.cursor = '-webkit-grab'
-	}
+		// Create a clean slate for the slider
+		carouselRef.value.innerHTML = ''
+
+		// Create or recreate the slider frame
+		if (!sliderFrame.value) {
+			sliderFrame.value = document.createElement('div')
+		} else {
+			// Clear existing content
+			while (sliderFrame.value.firstChild) {
+				sliderFrame.value.removeChild(sliderFrame.value.firstChild)
+			}
+		}
 
-	// Create document fragment for slides
-	const docFragment = document.createDocumentFragment()
+		sliderFrame.value.style.width = `${widthItem * itemsToBuild}px`
+		enableTransition()
+
+		if (config.value.draggable) {
+			carouselRef.value.style.cursor = '-webkit-grab'
+		}
+
+		// Create a fragment to hold all slider content
+		const docFragment = document.createDocumentFragment()
 
-	// Add clones before original elements if loop is true
-	if (config.value.loop && innerElements.value.length > 0) {
-		for (let i = innerElements.value.length - perPage.value; i < innerElements.value.length; i++) {
-			// Ensure the index is valid
-			if (i >= 0 && i < innerElements.value.length) {
-				const element = buildSliderFrameItem(innerElements.value[i].cloneNode(true) as Element)
-				docFragment.appendChild(element)
+		// Add clones before original items (for loop mode)
+		if (config.value.loop && innerElements.value.length > 0) {
+			for (let i = originalCount - perPage.value; i < originalCount; i++) {
+				if (i >= 0 && i < originalCount) {
+					const original = innerElements.value[i]
+					const clone = original.cloneNode(true) as Element
+
+					if (clone instanceof HTMLElement) {
+						clone.setAttribute('data-clone', 'before')
+						copyAttributesAndEvents(original, clone)
+					}
+
+					const wrapped = buildSliderFrameItem(clone)
+					docFragment.appendChild(wrapped)
+				}
 			}
 		}
-	}
 
-	// Add original elements
-	for (let i = 0; i < innerElements.value.length; i++) {
-		const element = buildSliderFrameItem(innerElements.value[i])
-		docFragment.appendChild(element)
-	}
+		// Add main items (already clones of the slot content)
+		for (let i = 0; i < originalCount; i++) {
+			const element = innerElements.value[i]
+			const wrapped = buildSliderFrameItem(element.cloneNode(true) as Element)
+			docFragment.appendChild(wrapped)
+		}
+
+		// Add clones after original items (for loop mode)
+		if (config.value.loop && innerElements.value.length > 0) {
+			for (let i = 0; i < perPage.value; i++) {
+				if (i >= 0 && i < originalCount) {
+					const original = innerElements.value[i]
+					const clone = original.cloneNode(true) as Element
+
+					if (clone instanceof HTMLElement) {
+						clone.setAttribute('data-clone', 'after')
+						copyAttributesAndEvents(original, clone)
+					}
 
-	// Add clones after original elements if loop is true
-	if (config.value.loop && innerElements.value.length > 0) {
-		for (let i = 0; i < perPage.value; i++) {
-			// Ensure the index is valid
-			if (i >= 0 && i < innerElements.value.length) {
-				const element = buildSliderFrameItem(innerElements.value[i].cloneNode(true) as Element)
-				docFragment.appendChild(element)
+					const wrapped = buildSliderFrameItem(clone)
+					docFragment.appendChild(wrapped)
+				}
 			}
 		}
-	}
 
-	// Clear selector and append the frame
-	if (sliderFrame.value) {
-		sliderFrame.value.innerHTML = ''
+		// Append all content to the slider frame
 		sliderFrame.value.appendChild(docFragment)
 
-		if (carouselRef.value) {
-			carouselRef.value.innerHTML = ''
-			carouselRef.value.appendChild(sliderFrame.value)
+		// Add the slider frame to the carousel
+		carouselRef.value.appendChild(sliderFrame.value)
+
+		// Update currentSlide if needed to stay within bounds
+		if (currentSlide.value >= innerElements.value.length) {
+			currentSlide.value = Math.max(0, innerElements.value.length - 1)
+		}
+
+		// Set initial position
+		slideToCurrent()
+	} catch (error) {
+		console.error('Error building slider frame:', error)
+	} finally {
+		// Always make sure to reset the building flag
+		isBuilding.value = false
+	}
+}
+
+// Helper function to copy attributes and events from original to clone
+function copyAttributesAndEvents(original: Element, clone: Element): void {
+	if (!(original instanceof HTMLElement) || !(clone instanceof HTMLElement)) {
+		return
+	}
+
+	// Copy all attributes
+	const allAttrs = original.attributes
+	for (let i = 0; i < allAttrs.length; i++) {
+		const attr = allAttrs[i]
+		if (attr.name !== 'id') { // Skip id to avoid duplicate IDs
+			clone.setAttribute(attr.name, attr.value)
 		}
 	}
 
-	// Go to current slide
-	slideToCurrent()
+	// For Vue-specific elements, add a custom click handler that relays to the original
+	clone.addEventListener('click', (e) => {
+		// Check if original has a click handler
+		if (typeof (original as any).click === 'function') {
+			// We need to simulate the click on the original element
+			// Create and dispatch a new click event on the original element
+			const clickEvent = new MouseEvent('click', {
+				bubbles: true,
+				cancelable: true,
+				view: window
+			})
+			original.dispatchEvent(clickEvent)
+
+			// Stop propagation of the clone's event
+			e.stopPropagation()
+		}
+	})
+
+	// Special handling for links
+	if (original.tagName === 'A' && clone.tagName === 'A') {
+		const originalHref = original.getAttribute('href')
+		if (originalHref) {
+			clone.addEventListener('click', (e) => {
+				e.preventDefault()
+
+				// Get original onClick behavior
+				if (original.onclick) {
+					original.onclick(new MouseEvent('click'))
+				} else {
+					// Default behavior - navigate like original link would
+					const targetBlank = original.getAttribute('target') === '_blank'
+					if (targetBlank) {
+						window.open(originalHref, '_blank')
+					} else {
+						window.location.href = originalHref
+					}
+				}
+			})
+		}
+	}
 }
 
 function buildSliderFrameItem(elm: Element): HTMLElement {
@@ -346,39 +507,51 @@ function buildSliderFrameItem(elm: Element): HTMLElement {
 	elementContainer.style.cssFloat = config.value.rtl ? 'right' : 'left'
 	elementContainer.style.float = config.value.rtl ? 'right' : 'left'
 	elementContainer.style.padding = config.value.slideGap ? `${config.value.slideGap / 2}rem` : '0'
+
 	const percentage = config.value.loop
-		? 100 / (innerElements.value.length + (perPage.value * 2))
+		? 100 / (innerElements.value.length + (2 * perPage.value))
 		: 100 / innerElements.value.length
 
 	elementContainer.style.width = `${percentage}%`
 	elementContainer.appendChild(elm)
-
 	return elementContainer
 }
 
 function slideToCurrent(enableTransitionFlag?: boolean): void {
-	const currentSlideValue = config.value.loop
-		? currentSlide.value + perPage.value
-		: currentSlide.value
+	try {
+		// Ensure component is still mounted
+		if (!isMounted.value || !innerElements.value.length || !sliderFrame.value) return
+
+		const currentSlideValue = config.value.loop
+			? currentSlide.value + perPage.value
+			: currentSlide.value
 
-	const offset = (config.value.rtl ? 1 : -1) * currentSlideValue * (selectorWidth.value / perPage.value)
+		const offset = (config.value.rtl ? 1 : -1) * currentSlideValue * (selectorWidth.value / perPage.value)
 
-	if (enableTransitionFlag && sliderFrame.value) {
-		// Use requestAnimationFrame for smooth transitions
-		requestAnimationFrame(() => {
+		if (enableTransitionFlag && sliderFrame.value) {
+			// Use requestAnimationFrame for smooth transitions
 			requestAnimationFrame(() => {
-				enableTransition()
-				if (sliderFrame.value) {
+				// Check again that we're still mounted and have the frame
+				if (!isMounted.value || !sliderFrame.value) return
+
+				requestAnimationFrame(() => {
+					if (!isMounted.value || !sliderFrame.value) return
+
+					enableTransition()
 					sliderFrame.value.style[transformProperty.value as any] = `translate3d(${offset}px, 0, 0)`
-				}
+				})
 			})
-		})
-	} else if (sliderFrame.value) {
-		sliderFrame.value.style[transformProperty.value as any] = `translate3d(${offset}px, 0, 0)`
+		} else if (sliderFrame.value) {
+			sliderFrame.value.style[transformProperty.value as any] = `translate3d(${offset}px, 0, 0)`
+		}
+	} catch (error) {
+		console.error('Error in slideToCurrent:', error)
 	}
 }
 
 function prev(howManySlides: number = 1): void {
+	if (!isMounted.value || isBuilding.value || !innerElements.value.length) return
+
 	const beforeChange = currentSlide.value
 
 	if (config.value.loop) {
@@ -415,6 +588,8 @@ function prev(howManySlides: number = 1): void {
 }
 
 function next(howManySlides: number = 1): void {
+	if (!isMounted.value || isBuilding.value || !innerElements.value.length) return
+
 	const beforeChange = currentSlide.value
 
 	if (config.value.loop) {
@@ -482,6 +657,8 @@ function enableTransition(): void {
 }
 
 function updateAfterDrag(): void {
+	if (!isMounted.value) return
+
 	const movement = (config.value.rtl ? -1 : 1) * (drag.value.endX - drag.value.startX)
 	const movementDistance = Math.abs(movement)
 	const howManySliderToSlide = config.value.multipleDrag
@@ -530,6 +707,8 @@ function clearDrag(): void {
 
 // Touch event handlers
 function touchstartHandler(e: TouchEvent): void {
+	if (isBuilding.value || !isMounted.value) return
+
 	const target = e.target as HTMLElement
 	const ignoreTags = ['TEXTAREA', 'OPTION', 'INPUT', 'SELECT'].includes(target.nodeName)
 
@@ -552,9 +731,44 @@ function touchstartHandler(e: TouchEvent): void {
 	if (isLink || isImage) {
 		drag.value.preventClick = false
 	}
+
+	// When starting drag during linear autoplay, save the current position
+	if (config.value.autoplay === 'linear' && sliderFrame.value) {
+		// Get the current transform value and save it to apply during dragging
+		const currentTransform = getComputedStyle(sliderFrame.value)[transformProperty.value as any]
+		if (currentTransform && currentTransform !== 'none') {
+			try {
+				// Parse the transform matrix to get the current X position
+				const matrix = new DOMMatrix(currentTransform)
+				const currentX = matrix.m41
+
+				// Convert position to slides and update currentSlide
+				const itemWidth = selectorWidth.value / perPage.value
+				if (config.value.loop) {
+					// Adjust for the perPage offset in loop mode
+					const totalPosition = Math.abs(currentX)
+					const slidePosition = Math.round(totalPosition / itemWidth) - perPage.value
+					currentSlide.value = slidePosition >= 0
+						? slidePosition % innerElements.value.length
+						: (innerElements.value.length + (slidePosition % innerElements.value.length)) % innerElements.value.length
+				} else {
+					// In non-loop mode, just calculate the current slide
+					const slidePosition = Math.round(Math.abs(currentX) / itemWidth)
+					currentSlide.value = Math.min(Math.max(slidePosition, 0), innerElements.value.length - perPage.value)
+				}
+			} catch (e) {
+				console.error('Error parsing transform matrix:', e)
+			}
+		}
+
+		// Stop the animation immediately
+		stopAutoplay()
+	}
 }
 
 function touchendHandler(e: TouchEvent): void {
+	if (isBuilding.value || !isMounted.value) return
+
 	e.stopPropagation()
 
 	// If we were dragging, prevent clicks by adding a short-lived capture event listener
@@ -581,12 +795,14 @@ function touchendHandler(e: TouchEvent): void {
 	clearDrag()
 
 	// Restart autoplay after touch interaction
-	if (config.value.autoplay !== 'disabled') {
+	if (config.value.autoplay !== 'disabled' && !isHovering.value && isMounted.value) {
 		startAutoplay()
 	}
 }
 
 function touchmoveHandler(e: TouchEvent): void {
+	if (isBuilding.value || !isMounted.value) return
+
 	e.stopPropagation()
 
 	if (drag.value.letItGo === null) {
@@ -628,6 +844,8 @@ function touchmoveHandler(e: TouchEvent): void {
 
 // Mouse event handlers
 function mousedownHandler(e: MouseEvent): void {
+	if (isBuilding.value || !isMounted.value) return
+
 	const target = e.target as HTMLElement
 	const ignoreTags = ['TEXTAREA', 'OPTION', 'INPUT', 'SELECT'].includes(target.nodeName)
 
@@ -648,9 +866,44 @@ function mousedownHandler(e: MouseEvent): void {
 	if (isLink || isImage) {
 		drag.value.preventClick = false // Start with false, will be set to true if actual dragging occurs
 	}
+
+	// When starting drag during linear autoplay, save the current position
+	if (config.value.autoplay === 'linear' && sliderFrame.value) {
+		// Get the current transform value and save it to apply during dragging
+		const currentTransform = getComputedStyle(sliderFrame.value)[transformProperty.value as any]
+		if (currentTransform && currentTransform !== 'none') {
+			try {
+				// Parse the transform matrix to get the current X position
+				const matrix = new DOMMatrix(currentTransform)
+				const currentX = matrix.m41
+
+				// Convert position to slides and update currentSlide
+				const itemWidth = selectorWidth.value / perPage.value
+				if (config.value.loop) {
+					// Adjust for the perPage offset in loop mode
+					const totalPosition = Math.abs(currentX)
+					const slidePosition = Math.round(totalPosition / itemWidth) - perPage.value
+					currentSlide.value = slidePosition >= 0
+						? slidePosition % innerElements.value.length
+						: (innerElements.value.length + (slidePosition % innerElements.value.length)) % innerElements.value.length
+				} else {
+					// In non-loop mode, just calculate the current slide
+					const slidePosition = Math.round(Math.abs(currentX) / itemWidth)
+					currentSlide.value = Math.min(Math.max(slidePosition, 0), innerElements.value.length - perPage.value)
+				}
+			} catch (e) {
+				console.error('Error parsing transform matrix:', e)
+			}
+		}
+
+		// Stop the animation immediately
+		stopAutoplay()
+	}
 }
 
 function mouseupHandler(e: MouseEvent): void {
+	if (isBuilding.value || !isMounted.value) return
+
 	e.stopPropagation()
 
 	// If we were dragging, prevent clicks by adding a short-lived capture event listener
@@ -682,12 +935,14 @@ function mouseupHandler(e: MouseEvent): void {
 	clearDrag()
 
 	// Restart autoplay after mouse interaction if not hovering
-	if (config.value.autoplay !== 'disabled' && !isHovering.value) {
+	if (config.value.autoplay !== 'disabled' && !isHovering.value && isMounted.value) {
 		startAutoplay()
 	}
 }
 
 function mousemoveHandler(e: MouseEvent): void {
+	if (isBuilding.value || !isMounted.value) return
+
 	e.preventDefault()
 
 	if (pointerDown.value) {
@@ -726,6 +981,8 @@ function mousemoveHandler(e: MouseEvent): void {
 }
 
 function mouseleaveHandler(e: MouseEvent): void {
+	if (isBuilding.value || !isMounted.value) return
+
 	if (pointerDown.value) {
 		pointerDown.value = false
 
@@ -742,6 +999,8 @@ function mouseleaveHandler(e: MouseEvent): void {
 }
 
 function clickHandler(e: MouseEvent): void {
+	if (isBuilding.value || !isMounted.value) return
+
 	if (drag.value.preventClick || isDragging.value) {
 		e.preventDefault()
 		e.stopPropagation()
@@ -754,6 +1013,8 @@ function clickHandler(e: MouseEvent): void {
 
 // Add this new function to handle dragstart events
 function dragstartHandler(e: DragEvent): void {
+	if (isBuilding.value || !isMounted.value) return // Prevent interaction during build
+
 	// Prevent default drag behavior for images and links
 	if (config.value.draggable) {
 		const target = e.target as HTMLElement
@@ -835,11 +1096,14 @@ function destroy(restoreMarkup: boolean = false): void {
 
 // Add after init()
 async function startAutoplay(): Promise<void> {
+	if (!isMounted.value) return // Don't start if not mounted
+
 	stopAutoplay() // Clear any existing timers first
 
 	if (config.value.autoplay === 'standard') {
 		autoplayTimer.value = window.setInterval(() => {
-			if (!isHovering.value) {
+			// Check if component is still mounted before advancing
+			if (isMounted.value && !isHovering.value && !isBuilding.value) {
 				next()
 			}
 		}, config.value.autoplayInterval)
@@ -861,12 +1125,21 @@ function stopAutoplay(): void {
 }
 
 function startLinearAutoplay(): void {
-	// Reset the linear offset
-	linearOffset.value = 0
+	if (!isMounted.value || !innerElements.value.length) return
+
+	// Reset the linear offset to the current slide position
+	const itemWidth = selectorWidth.value / perPage.value
+	linearOffset.value = currentSlide.value * itemWidth
 	let lastTimestamp = 0
 
 	// Animation function
 	const animate = (timestamp: number) => {
+		// Always verify that the component is still mounted
+		if (!isMounted.value || !sliderFrame.value) {
+			stopAutoplay()
+			return
+		}
+
 		if (!lastTimestamp) lastTimestamp = timestamp
 
 		// Calculate time delta and convert to pixels based on speed
@@ -884,7 +1157,6 @@ function startLinearAutoplay(): void {
 		linearOffset.value += pixelsToMove
 
 		// Calculate total width of all items
-		const itemWidth = selectorWidth.value / perPage.value
 		const totalWidth = itemWidth * innerElements.value.length
 
 		// If we've scrolled past the entire content, reset
@@ -895,16 +1167,22 @@ function startLinearAutoplay(): void {
 				// If not looping, stop at the end
 				linearOffset.value = totalWidth - itemWidth
 				stopAutoplay()
-				return
 			}
 		}
 
 		// Apply the offset using transforms
-		if (sliderFrame.value) {
+		if (sliderFrame.value && !isBuilding.value) {
 			const direction = config.value.rtl ? 1 : -1
 			sliderFrame.value.style.transition = 'none' // Smooth scrolling, no easing
+
+			// In loop mode, we need to offset by perPage
+			let displayOffset = linearOffset.value
+			if (config.value.loop) {
+				displayOffset = linearOffset.value + (perPage.value * itemWidth)
+			}
+
 			sliderFrame.value.style[transformProperty.value as any]
-				= `translate3d(${direction * linearOffset.value}px, 0, 0)`
+				= `translate3d(${direction * displayOffset}px, 0, 0)`
 		}
 
 		// Update current slide based on the offset
@@ -914,12 +1192,16 @@ function startLinearAutoplay(): void {
 			config.value.onChange()
 		}
 
-		// Continue animation loop
-		linearAnimationFrame.value = requestAnimationFrame(animate)
+		// Continue animation loop only if mounted
+		if (isMounted.value) {
+			linearAnimationFrame.value = requestAnimationFrame(animate)
+		}
 	}
 
-	// Start the animation
-	linearAnimationFrame.value = requestAnimationFrame(animate)
+	// Start the animation only if mounted
+	if (isMounted.value) {
+		linearAnimationFrame.value = requestAnimationFrame(animate)
+	}
 }
 
 // Event handlers for autoplay pausing
@@ -942,6 +1224,137 @@ function resumeAutoplay(): void {
 	}
 }
 
+// Add function to set up the MutationObserver
+function setupSlotObserver(): void {
+	if (!slotContainer.value || slotObserver.value) return
+
+	// Create a new MutationObserver
+	slotObserver.value = new MutationObserver((mutations) => {
+		// Skip if building or over rebuild limit
+		if (isBuilding.value || !isMounted.value
+			|| emptyRebuildAttempts.value >= MAX_EMPTY_REBUILD_ATTEMPTS) {
+			return
+		}
+
+		let needsRebuild = false
+
+		for (const mutation of mutations) {
+			if (mutation.type === 'childList') {
+				needsRebuild = true
+				break
+			}
+		}
+
+		if (needsRebuild) {
+			nextTick(() => {
+				if (isMounted.value && slotContainer.value) {
+					// Update by cloning the new content
+					innerElements.value = Array.from(slotContainer.value.children).map(
+						el => el.cloneNode(true) as Element
+					)
+
+					updateSlider()
+				}
+			})
+		}
+	})
+
+	// Start observing
+	slotObserver.value.observe(slotContainer.value, {
+		childList: true,
+		subtree: false,
+		attributes: false,
+		characterData: false
+	})
+}
+
+// Modify updateSlider to safely handle DOM references and always use slotContainer
+function updateSlider(): void {
+	if (!carouselRef.value || !slotContainer.value || isBuilding.value || !isMounted.value) return
+
+	// Prevent too many empty rebuild attempts
+	if (emptyRebuildAttempts.value >= MAX_EMPTY_REBUILD_ATTEMPTS) {
+		console.warn('Too many rebuild attempts with no items, stopping')
+		return
+	}
+
+	try {
+		// Temporarily disconnect observer to avoid recursive calls
+		if (slotObserver.value) {
+			slotObserver.value.disconnect()
+		}
+
+		// Clone the slot content always
+		const slotElements = Array.from(slotContainer.value.children)
+			.map(el => el.cloneNode(true) as Element)
+
+		// Only proceed if we have elements to work with or if we need to clear for the first time
+		if (slotElements.length > 0 || (innerElements.value.length > 0 && emptyRebuildAttempts.value === 0)) {
+			// Store previous count for comparison
+			const previousCount = innerElements.value.length
+
+			// Update elements with clones of slot content
+			innerElements.value = slotElements
+
+			// Adjust current slide if needed
+			if (currentSlide.value >= innerElements.value.length) {
+				currentSlide.value = Math.max(0, innerElements.value.length - 1)
+			}
+
+			// If we're transitioning from 0 to some elements or vice versa,
+			// we need special handling
+			const isInitialPopulation = previousCount === 0 && slotElements.length > 0
+
+			// Stop autoplay during rebuild to prevent errors
+			const wasAutoplay = config.value.autoplay !== 'disabled'
+			if (wasAutoplay) {
+				stopAutoplay()
+			}
+
+			// Rebuild the slider frame
+			buildSliderFrame()
+
+			// Resume autoplay if it was active and not hovering
+			if (wasAutoplay && !isHovering.value && innerElements.value.length > 0) {
+				// Small delay for stability
+				setTimeout(() => {
+					startAutoplay()
+				}, 50)
+			}
+		}
+	} catch (error) {
+		console.error('Error updating slider:', error)
+	} finally {
+		// Always reconnect observer to the slot container
+		if (slotObserver.value && slotContainer.value) {
+			slotObserver.value.observe(slotContainer.value, {
+				childList: true,
+				subtree: false,
+				attributes: false,
+				characterData: false
+			})
+		}
+	}
+}
+
+// Update resetSlider to use slotContainer instead of carouselRef
+function resetSlider(): void {
+	// Reset the counter to allow rebuilding again
+	emptyRebuildAttempts.value = 0
+
+	// Check if we have content now
+	if (slotContainer.value) {
+		const slotElements = Array.from(slotContainer.value.children)
+			.map(el => el.cloneNode(true) as Element)
+
+		if (slotElements.length > 0) {
+			// We have content now, rebuild
+			innerElements.value = slotElements
+			nextTick(() => { buildSliderFrame() })
+		}
+	}
+}
+
 // Expose public methods
 defineExpose({
 	prev,
@@ -955,14 +1368,24 @@ defineExpose({
 	currentSlide,
 	pauseAutoplay,
 	resumeAutoplay,
+	updateSlider,
+	resetSlider,
 })
 </script>
 
 <template>
 	<div class="carousel-wrapper">
-		<div ref="carouselRef" class="carousel-container">
+		<!-- Hidden container to hold the original slot content -->
+		<div ref="slotContainer" class="carousel-slot-container" style="display: none;">
 			<slot />
 		</div>
+
+		<!-- Visible carousel container that we will manually populate -->
+		<div ref="carouselRef" class="carousel-container">
+			<!-- We'll populate this with cloned content programmatically -->
+		</div>
+
+		<!-- Dots navigation (Vue-managed) -->
 		<div v-if="props.dots && totalDots > 1" class="carousel-dots">
 			<button
 				v-for="i in totalDots"