@bagelink/vue 0.0.1133 → 0.0.1137

package/src/components/Carousel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, watch } from 'vue'
+import { nextTick, onMounted, onUnmounted, watch } from 'vue'
 
 const props = defineProps({
 	autoHeight: { type: Boolean, default: false },
@@ -14,173 +14,547 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['update:index'])
-const bglSlider = $ref<HTMLElement>()
+
+// Constants
+const ANIMATION_TIMINGS = {
+	TOUCH: 150,
+	MOBILE: 300,
+	DESKTOP: 400,
+	MAX_DURATION: 300,
+	BASE_DURATION: 150,
+	DURATION_PER_PANEL: 50,
+} as const
+
+const THRESHOLDS = {
+	DRAG: 20,
+	TOUCH: 5,
+	SWIPE_PERCENT: 0.1,
+	VELOCITY: 0.15,
+	WHEEL_PERCENT: 0.3,
+} as const
+
+// Add gap constant
+const GAP_PERCENT = 1
+
+// Template refs and state
+const bglSlider = $ref<HTMLElement | undefined>()
+const isSliderAvailable = $computed(() => !!bglSlider)
 
 let itemCount = $ref(props.items)
 let activeSlideIndex = $ref(props.index)
+let slideCount = $ref(0)
+let yHeight = $ref('auto')
+
+// Interaction state
 let isDragging = $ref(false)
 let isPressed = $ref(false)
 let startX = $ref(0)
-let scrollStart = $ref(0)
-let yHeight = $ref('auto')
-let slideCount = $ref(0)
+let startY = $ref(0)
+let translateX = $ref(0)
+let lastX = $ref(0)
+let lastTime = $ref(0)
+let swipeVelocity = $ref(0)
+let accumulatedDeltaX = $ref(0)
+
+// Timers
 let timeout: NodeJS.Timeout
+let wheelTimeout: NodeJS.Timeout
 let autoPlayInterval: NodeJS.Timeout
 
-// Helper Functions
-function preventDefaultClick(e: MouseEvent) {
-	if (isDragging) {
-		e.preventDefault()
-	}
+// Add interface for velocity tracking
+interface VelocitySample {
+	time: number
+	position: number
 }
 
-function countSlides() {
-	if (!bglSlider) return
-	slideCount = bglSlider.children.length
+let velocityTracker = $ref<VelocitySample[]>([])
+const VELOCITY_SAMPLE_DURATION = 100 // ms to track velocity
+
+function getAverageVelocity(): number {
+	if (velocityTracker.length < 2) return 0
+
+	const now = Date.now()
+	// Only consider samples within our sample duration
+	const recentSamples = velocityTracker.filter((sample: VelocitySample) => now - sample.time < VELOCITY_SAMPLE_DURATION)
+
+	if (recentSamples.length < 2) return 0
+
+	const first = recentSamples[0]
+	const last = recentSamples[recentSamples.length - 1]
+	const timeDelta = last.time - first.time
+
+	if (timeDelta === 0) return 0
+
+	return (last.position - first.position) / timeDelta
 }
 
-function disableDrag() {
-	bglSlider?.querySelectorAll('img').forEach((img) => { img.setAttribute('draggable', 'false') })
-	Array.from(bglSlider?.children || []).forEach((child) => {
-		child.setAttribute('draggable', 'false');
-		(child as HTMLElement).addEventListener('click', preventDefaultClick)
-	})
+// Transform helpers
+function getCurrentTransform(): number {
+	if (!bglSlider) return 0
+	const { transform } = bglSlider.style
+	const value = transform ? Number.parseInt(transform.replace(/[^-\d.]/g, '')) : 0
+	return props.rtl ? -value : value
 }
 
-function calcHeight() {
+function setTransform(value: number) {
 	if (!bglSlider) return
-	try {
-		const slide = bglSlider.children[activeSlideIndex]
-		if (!slide) return
-		const children = Array.from(slide.children)
-		const totalHeight = children.reduce((sum, el) => sum + el.clientHeight, 0)
-		yHeight = `${totalHeight}px`
-	} catch (error) {
-		console.error(error)
-	}
+	const rtlValue = props.rtl ? -value : value
+	bglSlider.style.transform = `translateX(${rtlValue}px)`
 }
 
-function updateHeight() {
-	if (!props.autoHeight) return
-	setTimeout(calcHeight, 200)
+function easeInOutQuad(t: number) {
+	return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
 }
 
-function easeScroll(target: number, duration = 500) {
-	if (!bglSlider || isPressed) return
-	const start = bglSlider.scrollLeft
-	const change = target - start
+function animateTransform(start: number, end: number, duration: number) {
 	const startTime = performance.now()
 
 	function animate(currentTime: number) {
-		if (!bglSlider) return
+		if (!isSliderAvailable) return
 		const timeElapsed = currentTime - startTime
 		const progress = Math.min(timeElapsed / duration, 1)
-		bglSlider.scrollLeft = start + change * easeInOutQuad(progress)
+		const currentTransform = start + (end - start) * easeInOutQuad(progress)
+		setTransform(currentTransform)
 		if (progress < 1) requestAnimationFrame(animate)
 	}
 
-	function easeInOutQuad(t: number) {
-		return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
-	}
-
 	requestAnimationFrame(animate)
 }
 
-function goToSlide(index: number) {
+// Navigation
+function goToSlide(index: number, isTouchNav = false) {
 	countSlides()
-	if (!bglSlider || index < 0 || index >= slideCount) return
-	const offset = bglSlider.offsetWidth * index * (props.rtl ? -1 : 1)
-	const duration = window.innerWidth < 600 ? 400 : window.innerWidth < 991 ? 500 : 700
-	easeScroll(offset, duration)
+	if (!isSliderAvailable || !bglSlider || index < 0 || index >= slideCount) return
+
+	const containerWidth = bglSlider.offsetWidth
+	const gapWidth = (containerWidth * GAP_PERCENT) / 100
+	const totalGapWidth = (itemCount - 1) * gapWidth
+	const singleItemWidth = (containerWidth - totalGapWidth) / itemCount
+
+	// Account for all gaps before this slide
+	const gapsBeforeSlide = index * gapWidth
+	const targetTransform = -(singleItemWidth * index + gapsBeforeSlide)
+
+	const currentTransform = getCurrentTransform()
+	const duration = isTouchNav
+		? ANIMATION_TIMINGS.TOUCH
+		: window.innerWidth < 600
+			? ANIMATION_TIMINGS.MOBILE
+			: ANIMATION_TIMINGS.DESKTOP
+
+	animateTransform(currentTransform, targetTransform, duration)
 	activeSlideIndex = index
 	updateHeight()
 }
 
+function next() {
+	if (!isSliderAvailable) return
+	countSlides()
+	goToSlide((activeSlideIndex + 1) % slideCount)
+}
+
+function prev() {
+	if (!isSliderAvailable) return
+	countSlides()
+	goToSlide((activeSlideIndex - 1 + slideCount) % slideCount)
+}
+
+// Height management
+function calcHeight() {
+	if (!isSliderAvailable || !bglSlider) return
+	try {
+		const activeSlide = bglSlider.children[activeSlideIndex]
+		if (!activeSlide) return
+		const children = Array.from(activeSlide.children) as HTMLElement[]
+		const totalHeight = children.reduce((sum, el) => sum + el.clientHeight, 0)
+		yHeight = `${totalHeight}px`
+	} catch (error) {
+		console.error('Error calculating height:', error)
+	}
+}
+
+function updateHeight() {
+	if (!props.autoHeight) return
+	setTimeout(calcHeight, 200)
+}
+
+// Slide management
+function countSlides() {
+	if (!isSliderAvailable || !bglSlider) return
+	slideCount = bglSlider.children.length
+}
+
+// Event handlers
 function handleSlideChange() {
-	if (props.index !== activeSlideIndex) emit('update:index', activeSlideIndex)
+	if (props.index !== activeSlideIndex) {
+		emit('update:index', activeSlideIndex)
+	}
 }
 
 function handleResize() {
-	if (!bglSlider) return
-	itemCount = window.innerWidth < 600 ? 1 : window.innerWidth < 991 ? Math.min(props.items, 2) : props.items
-	goToSlide(activeSlideIndex)
+	if (!isSliderAvailable || !bglSlider) return
+	itemCount = window.innerWidth < 600
+		? 1
+		: window.innerWidth < 991
+			? Math.min(props.items, 2)
+			: props.items
+
+	const containerWidth = bglSlider.offsetWidth
+	const gapWidth = (containerWidth * GAP_PERCENT) / 100
+	const totalGapWidth = (itemCount - 1) * gapWidth
+	const singleItemWidth = (containerWidth - totalGapWidth) / itemCount
+	const gapsBeforeSlide = activeSlideIndex * gapWidth
+	const targetTransform = -(singleItemWidth * activeSlideIndex + gapsBeforeSlide)
+
+	setTransform(targetTransform)
+	updateHeight()
 }
 
-function onScrollEnd() {
-	if ((!props.freeDrag && !props.allowScroll) || !bglSlider) return
+function clearAutoplay() {
 	if (autoPlayInterval) clearInterval(autoPlayInterval)
-	if (timeout) clearTimeout(timeout)
-	timeout = setTimeout(() => { finalizeScroll() }, 400)
 }
 
-function finalizeScroll() {
-	if (!bglSlider) return
-	if (props.autoplay) autoPlayInterval = setInterval(next, props.autoPlaySpeed)
-	scrollStart = props.rtl ? -bglSlider.scrollLeft : bglSlider.scrollLeft
-	activeSlideIndex = Math.round(scrollStart / bglSlider.offsetWidth)
-	goToSlide(activeSlideIndex)
+// Mouse events
+function preventDefaultClick(e: MouseEvent) {
+	if (isDragging) e.preventDefault()
+}
+
+async function disableDrag() {
+	await nextTick()
+	if (!isSliderAvailable || !bglSlider) return
+
+	const elements = Array.from(bglSlider.querySelectorAll('img, a')) as HTMLElement[]
+	elements.forEach((el) => {
+		el.setAttribute('draggable', 'false')
+	})
+
+	const slides = Array.from(bglSlider.children)
+	slides.forEach((slide) => {
+		const element = slide as HTMLElement
+		element.setAttribute('draggable', 'false')
+		element.removeEventListener('click', preventDefaultClick)
+		element.addEventListener('click', preventDefaultClick)
+	})
 }
 
 function startDrag(e: MouseEvent) {
-	if (e.button !== 0 || !props.freeDrag || !bglSlider) return
-	if (autoPlayInterval) clearInterval(autoPlayInterval)
-	startX = e.pageX - bglSlider.offsetLeft
-	scrollStart = bglSlider.scrollLeft
+	if (e.button !== 0 || !props.freeDrag || !isSliderAvailable) return
+
+	clearAutoplay()
+	startX = e.pageX
+	translateX = getCurrentTransform()
 	isPressed = true
+
 	document.addEventListener('mousemove', onDrag)
 	document.addEventListener('mouseup', endDrag)
 }
 
 function onDrag(e: MouseEvent) {
-	if (!bglSlider) return
-	const x = e.pageX - bglSlider.offsetLeft
+	if (!isSliderAvailable || !bglSlider || !isPressed) return
+
+	const x = e.pageX
 	const distance = x - startX
-	if (Math.abs(distance) > 20) isDragging = true
-	if (isDragging) bglSlider.scrollLeft = scrollStart - distance
+
+	if (Math.abs(distance) > THRESHOLDS.DRAG) isDragging = true
+	if (isDragging) {
+		const newTranslate = translateX + distance
+		const maxTranslate = 0
+
+		const containerWidth = bglSlider.offsetWidth
+		const gapWidth = (containerWidth * GAP_PERCENT) / 100
+		const totalGapWidth = (itemCount - 1) * gapWidth
+		const singleItemWidth = (containerWidth - totalGapWidth) / itemCount
+		const minTranslate = -(singleItemWidth * (slideCount - 1) + gapWidth * (slideCount - 1))
+
+		const boundedTranslate = Math.max(minTranslate, Math.min(maxTranslate, newTranslate))
+		setTransform(boundedTranslate)
+	}
 }
 
 function endDrag() {
 	isPressed = false
 	document.removeEventListener('mousemove', onDrag)
 	document.removeEventListener('mouseup', endDrag)
+
+	if (!isSliderAvailable || !bglSlider) return
+
+	const currentTransform = getCurrentTransform()
+	const singleItemWidth = bglSlider.offsetWidth / itemCount
+	const currentPanel = -currentTransform / singleItemWidth
+
+	const totalDragDistance = currentTransform - translateX
+	const dragPercentage = Math.abs(totalDragDistance) / singleItemWidth
+
+	let targetPanel = currentPanel
+	if (dragPercentage > THRESHOLDS.SWIPE_PERCENT) {
+		const direction = totalDragDistance > 0 ? -1 : 1
+		targetPanel = Math.floor(currentPanel) + (direction < 0 ? 0 : 1)
+	} else {
+		targetPanel = Math.round(currentPanel)
+	}
+
+	targetPanel = Math.max(0, Math.min(targetPanel, slideCount - 1))
+	goToSlide(targetPanel, true)
 	setTimeout(() => (isDragging = false), 100)
 }
 
-// Navigation Functions
-function next() {
-	if (!bglSlider) return
-	countSlides()
-	goToSlide((activeSlideIndex + 1) % slideCount)
+// Add a new state variable for tracking scroll direction
+let hasScrollDirectionLock = $ref(false)
+let isHorizontalScroll = $ref(false)
+
+function onTouchStart(e: TouchEvent) {
+	if (!props.freeDrag || !isSliderAvailable) return
+
+	const target = e.target as HTMLElement
+	const isInteractive = target.matches('button, a, input, select, textarea, [role="button"]')
+		|| target.closest('button, a, input, select, textarea, [role="button"]')
+
+	if (!isInteractive) {
+		// Don't prevent default immediately - let's wait to see the direction
+		clearAutoplay()
+		const touch = e.touches[0]
+		startX = touch.pageX
+		startY = touch.pageY
+		lastX = touch.pageX
+		lastTime = Date.now()
+		translateX = getCurrentTransform()
+		velocityTracker = [{ time: lastTime, position: lastX }]
+		swipeVelocity = 0
+		isPressed = true
+		hasScrollDirectionLock = false
+
+		// Ensure no transition is active when starting touch
+		if (bglSlider) {
+			bglSlider.style.transition = 'none'
+		}
+	}
 }
 
-function prev() {
-	if (!bglSlider) return
-	countSlides()
-	goToSlide((activeSlideIndex - 1 + slideCount) % slideCount)
+function onTouchMove(e: TouchEvent) {
+	if (!isSliderAvailable || !bglSlider || !isPressed) return
+
+	const touch = e.touches[0]
+	const x = touch.pageX
+	const y = touch.pageY
+	const deltaX = x - startX
+	const deltaY = y - startY
+
+	// Determine scroll direction if we haven't already
+	if (!hasScrollDirectionLock) {
+		// Only lock in a direction if there's significant movement
+		if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
+			isHorizontalScroll = Math.abs(deltaX) > Math.abs(deltaY)
+			hasScrollDirectionLock = true
+
+			// If it's vertical scrolling, release the touch capture
+			if (!isHorizontalScroll) {
+				isPressed = false
+				return
+			}
+		}
+		// Wait for more movement before deciding
+		return
+	}
+
+	// If we've determined this is a vertical scroll, don't handle the touch
+	if (!isHorizontalScroll) return
+
+	// Update velocity tracking
+	const now = Date.now()
+	velocityTracker.push({ time: now, position: x })
+	lastX = x
+
+	// Keep only recent samples
+	const cutoffTime = now - VELOCITY_SAMPLE_DURATION
+	velocityTracker = velocityTracker.filter((sample: VelocitySample) => sample.time >= cutoffTime)
+
+	// Calculate instantaneous velocity for immediate feedback
+	swipeVelocity = getAverageVelocity()
+
+	if (Math.abs(deltaX) > THRESHOLDS.TOUCH) {
+		isDragging = true
+		e.preventDefault() // Only prevent default if we're sure it's a horizontal drag
+	}
+
+	if (isDragging) {
+		const containerWidth = bglSlider.offsetWidth
+		const gapWidth = (containerWidth * GAP_PERCENT) / 100
+		const totalGapWidth = (itemCount - 1) * gapWidth
+		const singleItemWidth = (containerWidth - totalGapWidth) / itemCount
+		const totalWidth = (singleItemWidth * slideCount) + (gapWidth * (slideCount - 1))
+
+		// Calculate the new position based on touch movement
+		let newTranslate = translateX + (props.rtl ? -deltaX : deltaX)
+
+		// Add smooth resistance when pulling beyond bounds
+		if (newTranslate > 0) {
+			newTranslate = newTranslate * 0.5 // Softer resistance at start
+		} else if (newTranslate < -totalWidth + containerWidth) {
+			const overDrag = -totalWidth + containerWidth - newTranslate
+			newTranslate = -totalWidth + containerWidth - (overDrag * 0.5) // Softer resistance at end
+		}
+
+		// Apply the transform immediately without any easing
+		setTransform(newTranslate)
+	}
 }
 
-// Lifecycle Hooks
+function onTouchEnd() {
+	if (!isSliderAvailable || !bglSlider || !isPressed || !isHorizontalScroll) {
+		isPressed = false
+		hasScrollDirectionLock = false
+		return
+	}
+
+	const containerWidth = bglSlider.offsetWidth
+	const gapWidth = (containerWidth * GAP_PERCENT) / 100
+	const totalGapWidth = (itemCount - 1) * gapWidth
+	const singleItemWidth = (containerWidth - totalGapWidth) / itemCount
+	const totalSlideWidth = singleItemWidth + gapWidth
+
+	const currentTransform = getCurrentTransform()
+
+	// Normalize the transform value to handle overscroll
+	let normalizedTransform = currentTransform
+	if (currentTransform > 0) {
+		normalizedTransform = 0
+	} else {
+		const minTransform = -(singleItemWidth * (slideCount - 1) + gapWidth * (slideCount - 1))
+		if (currentTransform < minTransform) {
+			normalizedTransform = minTransform
+		}
+	}
+
+	const currentPanel = Math.abs(normalizedTransform / totalSlideWidth)
+
+	const totalSwipeDistance = lastX - startX
+	const swipePercentage = Math.abs(totalSwipeDistance) / totalSlideWidth
+
+	// Get final velocity from tracker
+	const finalVelocity = getAverageVelocity()
+
+	let targetPanel = currentPanel
+	let velocityDirection = 0
+
+	// Determine direction based on velocity and distance
+	if (Math.abs(finalVelocity) > THRESHOLDS.VELOCITY) {
+		velocityDirection = finalVelocity < 0 ? 1 : -1
+	}
+
+	const isMobile = window.innerWidth < 600
+
+	if (swipePercentage > THRESHOLDS.SWIPE_PERCENT || Math.abs(finalVelocity) > THRESHOLDS.VELOCITY) {
+		const direction = swipePercentage > THRESHOLDS.SWIPE_PERCENT
+			? (totalSwipeDistance > 0 ? -1 : 1)
+			: velocityDirection
+
+		const rtlDirection = props.rtl ? -direction : direction
+
+		if (isMobile) {
+			// On mobile, only move one slide at a time
+			targetPanel = activeSlideIndex + rtlDirection
+		} else {
+			// On desktop, keep the current behavior
+			targetPanel = Math.round(currentPanel) + rtlDirection
+		}
+	} else {
+		// If the swipe wasn't strong enough, snap back to the current slide
+		targetPanel = isMobile ? activeSlideIndex : Math.round(currentPanel)
+	}
+
+	targetPanel = Math.max(0, Math.min(targetPanel, slideCount - 1))
+	activeSlideIndex = targetPanel
+
+	// Adjust animation duration based on velocity and distance to travel
+	const distance = Math.abs(targetPanel - currentPanel)
+	const velocityFactor = Math.min(Math.abs(finalVelocity) * 1000, 1)
+	const duration = Math.min(
+		ANIMATION_TIMINGS.BASE_DURATION * (1 - velocityFactor * 0.5) + (distance * ANIMATION_TIMINGS.DURATION_PER_PANEL),
+		ANIMATION_TIMINGS.MAX_DURATION
+	)
+
+	// Re-enable transitions for the snap animation
+	bglSlider.style.transition = `transform ${duration}ms cubic-bezier(0.4, 0, 0.2, 1)`
+
+	const gapsBeforeSlide = targetPanel * gapWidth
+	const targetTransform = -(singleItemWidth * targetPanel + gapsBeforeSlide)
+	setTransform(targetTransform)
+
+	// Clear transition after animation
+	setTimeout(() => {
+		if (bglSlider) bglSlider.style.transition = 'none'
+	}, duration)
+
+	velocityTracker = []
+	swipeVelocity = 0
+	isDragging = false
+	hasScrollDirectionLock = false
+}
+
+// Wheel events
+function onWheel(e: WheelEvent) {
+	if (!props.allowScroll || !isSliderAvailable || !bglSlider || isPressed || isDragging) return
+
+	const isHorizontal = Math.abs(e.deltaX) > Math.abs(e.deltaY)
+	if (!isHorizontal) return
+
+	clearAutoplay()
+	if (wheelTimeout) clearTimeout(wheelTimeout)
+
+	accumulatedDeltaX += e.deltaX
+
+	wheelTimeout = setTimeout(() => {
+		accumulatedDeltaX = 0
+	}, 50)
+
+	const singleItemWidth = bglSlider.offsetWidth / itemCount
+	const moveThreshold = singleItemWidth * THRESHOLDS.WHEEL_PERCENT
+
+	if (Math.abs(accumulatedDeltaX) > moveThreshold) {
+		const direction = accumulatedDeltaX > 0 ? 1 : -1
+		const nextPanel = Math.max(0, Math.min(activeSlideIndex + direction, slideCount - 1))
+
+		if (nextPanel !== activeSlideIndex) {
+			goToSlide(nextPanel, true)
+			accumulatedDeltaX = 0
+		}
+	}
+}
+
+// Lifecycle
 onMounted(() => {
 	window.addEventListener('resize', handleResize)
-	disableDrag()
 	updateHeight()
 	handleResize()
 	countSlides()
+	disableDrag()
+
+	if (bglSlider) {
+		slideCount = bglSlider.children.length
+	}
+
 	if (props.autoplay) {
 		autoPlayInterval = setInterval(next, props.autoPlaySpeed)
 	}
 })
 
-function clearAutoplay() {
-	if (autoPlayInterval) clearInterval(autoPlayInterval)
-}
-
 onUnmounted(() => {
+	if (isSliderAvailable && bglSlider) {
+		Array.from(bglSlider.children).forEach((child) => {
+			const element = child as HTMLElement
+			element.removeEventListener('click', preventDefaultClick)
+		})
+	}
 	window.removeEventListener('resize', handleResize)
+	document.removeEventListener('mousemove', onDrag)
+	document.removeEventListener('mouseup', endDrag)
+	clearAutoplay()
+	if (timeout) clearTimeout(timeout)
+	if (wheelTimeout) clearTimeout(wheelTimeout)
 })
 
 // Watchers
-watch(() => props.index, goToSlide)
+watch(() => props.index, (newIndex: number) => { goToSlide(newIndex) })
 watch(() => activeSlideIndex, handleSlideChange)
 </script>
 
@@ -189,18 +563,26 @@ watch(() => activeSlideIndex, handleSlideChange)
 		<div
 			ref="bglSlider"
 			class="bgl-slider"
-			:class="{ dragging: isDragging, clicking: isPressed, allowScroll, odd: itemCount % 2 !== 0, [`slides-${itemCount}`]: itemCount === 1 }"
+			:class="{ dragging: isDragging, clicking: isPressed, [`slides-${itemCount}`]: true }"
 			:style="{ '--item-count': itemCount }"
-			@scroll="onScrollEnd"
 			@mousedown="startDrag"
 			@mouseover="clearAutoplay"
 			@focusin="clearAutoplay"
+			@touchstart="onTouchStart"
+			@touchmove="onTouchMove"
+			@touchend="onTouchEnd"
+			@wheel="onWheel"
 		>
-			<div v-if="isDragging" class="blocker" />
 			<slot />
 		</div>
-		<div v-if="dots && slideCount > 1" class="dots flex-center gap-05 mt-1">
-			<span v-for="i in slideCount" :key="i" class="dot cursor" :class="{ current: activeSlideIndex === i - 1 }" @click="goToSlide(i - 1)" />
+		<div v-if="props.dots && slideCount > 1" class="dots">
+			<span
+				v-for="i in slideCount"
+				:key="i"
+				class="dot"
+				:class="{ current: activeSlideIndex === i - 1 }"
+				@click="goToSlide(i - 1)"
+			/>
 		</div>
 		<div class="Handlers">
 			<span @click="prev"><slot name="prev" :index="activeSlideIndex" :prev="prev" /></span>
@@ -210,85 +592,74 @@ watch(() => activeSlideIndex, handleSlideChange)
 </template>
 
 <style scoped>
-.dot{
-	height: 10px;
-	width: 10px;
-	border-radius: 50%;
-	background-color: var(--bgl-black);
-	opacity: 0.4;
-}
-.dot.current{
-	opacity: 0.8;
-}
-.blocker {
-	position: fixed;
-	top: 0;
-	left: 0;
+.BglCarousel {
+	position: relative;
 	width: 100%;
-	height: 100%;
-	z-index: 100;
+	overflow: hidden;
+	touch-action: pan-y pinch-zoom; /* Allow vertical scrolling */
 }
 
 .bgl-slider {
-	display: grid;
+	display: flex;
 	position: relative;
-	grid-auto-flow: column;
-	grid-auto-columns: 100%;
-	overflow-x: hidden;
-	/* scroll-snap-type: x mandatory; */
-	/* scroll-behavior: smooth; */
-
-}
-
-.autoHeight {
-	transition: height ease 0.7s;
-}
-
-.bgl-slider.allowScroll {
-	overflow-x: scroll;
-}
-
-.bgl-slider {
-	grid-auto-columns: calc(100% / var(--item-count) - calc(var(--item-count) - 1) * 1%);
+	width: 100%;
+	touch-action: pan-y pinch-zoom; /* Allow vertical scrolling */
+	will-change: transform;
+	transform: translateX(0);
 	gap: 1%;
+	cursor: grab;
+	transition: none;
+	-webkit-user-select: none;
+	user-select: none;
 }
 
-.bgl-slider.odd {
-	grid-auto-columns: calc(100% / var(--item-count) - calc(var(--item-count) - 2) * 1%);
+.bgl-slider > * {
+	flex: 0 0 calc((100% - (var(--item-count) - 1) * 1%) / var(--item-count));
+	width: calc((100% - (var(--item-count) - 1) * 1%) / var(--item-count));
+	min-width: calc((100% - (var(--item-count) - 1) * 1%) / var(--item-count));
+	position: relative;
+	overflow: hidden;
 }
 
-.bgl-slider.slides-1 {
-	grid-auto-columns: 100%;
-	gap: 0;
+.bgl-slider.slides-1 > * {
+	flex: 0 0 100%;
+	width: 100%;
+	min-width: 100%;
 }
 
-.bgl-slider::-webkit-scrollbar {
-	display: none;
+.dragging .bgl-slider > * {
+	pointer-events: none;
+	user-select: none;
 }
 
-.bgl-slider * {
-	scroll-snap-align: start;
+.autoHeight {
+	transition: height ease 0.7s;
 }
 
-.dragging.bgl-slider {
-	cursor: grabbing;
-	cursor: -webkit-grabbing;
-	scroll-snap-type: unset;
+.dots {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	margin-top: 1rem;
+	gap: 8px;
 }
 
-.clicking.bgl-slider {
-	scroll-behavior: unset;
+.dot {
+	height: 10px;
+	width: 10px;
+	border-radius: 50%;
+	background-color: var(--bgl-black);
+	opacity: 0.4;
+	transition: opacity 0.3s ease;
+	cursor: pointer;
 }
 
-.dragging.bgl-slider * {
-	scroll-snap-align: unset;
-	user-select: none;
+.dot:hover {
+	opacity: 0.6;
 }
 
-@media screen and (max-width: 600px) {
-	.bgl-slider.slides-1> * {
-		margin-inline-start: 0%;
-	}
-
+.dot.current {
+	opacity: 0.8;
 }
 </style>