lazer-slider 1.1.1 → 1.1.3

package/dist/index.js

@@ -85,16 +85,19 @@ var updateActiveThumb = (thumbs, currentIndex, activeClass = "active") => {
     thumb.setAttribute("aria-selected", isActive.toString());
   });
 };
-var setupKeyboardNavigation = (feed, onPrev, onNext, abortSignal) => {
+var setupKeyboardNavigation = (feed, onPrev, onNext, abortSignal, direction = "horizontal") => {
+  const isVertical = direction === "vertical";
+  const prevKey = isVertical ? "ArrowUp" : "ArrowLeft";
+  const nextKey = isVertical ? "ArrowDown" : "ArrowRight";
   feed.addEventListener(
     "keydown",
     (event) => {
       switch (event.key) {
-        case "ArrowLeft":
+        case prevKey:
           event.preventDefault();
           onPrev();
           break;
-        case "ArrowRight":
+        case nextKey:
           event.preventDefault();
           onNext();
           break;
@@ -111,21 +114,25 @@ var setupKeyboardNavigation = (feed, onPrev, onNext, abortSignal) => {
 var createDragState = () => ({
   isDragging: false,
   startX: 0,
+  startY: 0,
   startScrollLeft: 0,
+  startScrollTop: 0,
   velocity: 0,
   lastX: 0,
+  lastY: 0,
   lastTime: 0,
   momentumId: null
 });
-var findNearestSlide = (feed, slides) => {
+var findNearestSlide = (feed, slides, direction = "horizontal") => {
   const feedRect = feed.getBoundingClientRect();
-  const feedCenter = feedRect.left + feedRect.width / 2;
+  const isVertical = direction === "vertical";
+  const feedCenter = isVertical ? feedRect.top + feedRect.height / 2 : feedRect.left + feedRect.width / 2;
   let nearestSlide = null;
   let minDistance = Infinity;
   for (const slide of slides) {
     if (slide.offsetParent === null) continue;
     const slideRect = slide.getBoundingClientRect();
-    const slideCenter = slideRect.left + slideRect.width / 2;
+    const slideCenter = isVertical ? slideRect.top + slideRect.height / 2 : slideRect.left + slideRect.width / 2;
     const distance = Math.abs(feedCenter - slideCenter);
     if (distance < minDistance) {
       minDistance = distance;
@@ -134,20 +141,26 @@ var findNearestSlide = (feed, slides) => {
   }
   return nearestSlide;
 };
-var applyMomentum = (state, feed, slides, smoothScrollTo, onDragEnd) => {
+var applyMomentum = (state, feed, slides, smoothScrollTo, onDragEnd, direction = "horizontal") => {
   const friction = 0.95;
   const minVelocity = 0.5;
+  const isVertical = direction === "vertical";
   const animate = () => {
     if (Math.abs(state.velocity) < minVelocity) {
       state.momentumId = null;
-      const nearestSlide = findNearestSlide(feed, slides);
+      const nearestSlide = findNearestSlide(feed, slides, direction);
       if (nearestSlide) {
-        smoothScrollTo(nearestSlide.offsetLeft, easeOutCubic);
+        const targetPosition = isVertical ? nearestSlide.offsetTop : nearestSlide.offsetLeft;
+        smoothScrollTo(targetPosition, easeOutCubic);
       }
       onDragEnd?.();
       return;
     }
-    feed.scrollLeft += state.velocity;
+    if (isVertical) {
+      feed.scrollTop += state.velocity;
+    } else {
+      feed.scrollLeft += state.velocity;
+    }
     state.velocity *= friction;
     state.momentumId = requestAnimationFrame(animate);
   };
@@ -159,9 +172,16 @@ var getEventX = (event) => {
   }
   return event.clientX;
 };
+var getEventY = (event) => {
+  if ("touches" in event) {
+    return event.touches[0]?.clientY ?? 0;
+  }
+  return event.clientY;
+};
 var setupDragToScroll = (config) => {
-  const { feed, slides, abortSignal, smoothScrollTo, onDragEnd, dragFree = false } = config;
+  const { feed, slides, abortSignal, smoothScrollTo, onDragEnd, direction = "horizontal" } = config;
   const state = createDragState();
+  const isVertical = direction === "vertical";
   const handleDragStart = (event) => {
     if (state.momentumId !== null) {
       cancelAnimationFrame(state.momentumId);
@@ -169,11 +189,13 @@ var setupDragToScroll = (config) => {
     }
     state.isDragging = true;
     state.startX = getEventX(event);
+    state.startY = getEventY(event);
     state.startScrollLeft = feed.scrollLeft;
+    state.startScrollTop = feed.scrollTop;
     state.velocity = 0;
     state.lastX = state.startX;
+    state.lastY = state.startY;
     state.lastTime = performance.now();
-    feed.style.cursor = "grabbing";
     feed.style.userSelect = "none";
     if (event.type === "mousedown") {
       event.preventDefault();
@@ -182,14 +204,24 @@ var setupDragToScroll = (config) => {
   const handleDragMove = (event) => {
     if (!state.isDragging) return;
     const currentX = getEventX(event);
+    const currentY = getEventY(event);
     const currentTime = performance.now();
-    const deltaX = state.startX - currentX;
     const deltaTime = currentTime - state.lastTime;
-    feed.scrollLeft = state.startScrollLeft + deltaX;
-    if (deltaTime > 0) {
-      state.velocity = (state.lastX - currentX) / deltaTime * 16;
+    if (isVertical) {
+      const deltaY = state.startY - currentY;
+      feed.scrollTop = state.startScrollTop + deltaY;
+      if (deltaTime > 0) {
+        state.velocity = (state.lastY - currentY) / deltaTime * 16;
+      }
+      state.lastY = currentY;
+    } else {
+      const deltaX = state.startX - currentX;
+      feed.scrollLeft = state.startScrollLeft + deltaX;
+      if (deltaTime > 0) {
+        state.velocity = (state.lastX - currentX) / deltaTime * 16;
+      }
+      state.lastX = currentX;
     }
-    state.lastX = currentX;
     state.lastTime = currentTime;
     if (event.type === "touchmove") {
       event.preventDefault();
@@ -198,41 +230,18 @@ var setupDragToScroll = (config) => {
   const handleDragEnd = () => {
     if (!state.isDragging) return;
     state.isDragging = false;
-    feed.style.cursor = "grab";
     feed.style.userSelect = "";
-    if (dragFree) {
-      if (Math.abs(state.velocity) > 1) {
-        applyMomentum(state, feed, slides, smoothScrollTo, onDragEnd);
-      } else {
-        const nearestSlide = findNearestSlide(feed, slides);
-        if (nearestSlide) {
-          smoothScrollTo(nearestSlide.offsetLeft, easeOutCubic);
-        }
-        onDragEnd?.();
-      }
+    if (Math.abs(state.velocity) > 1) {
+      applyMomentum(state, feed, slides, smoothScrollTo, onDragEnd, direction);
     } else {
-      const swipeDistance = state.startX - state.lastX;
-      const swipeThreshold = 50;
-      const nearestSlide = findNearestSlide(feed, slides);
-      if (nearestSlide && Math.abs(swipeDistance) > swipeThreshold) {
-        const visibleSlides = slides.filter((slide) => slide.offsetParent !== null);
-        const visibleIndex = visibleSlides.indexOf(nearestSlide);
-        let targetSlide = null;
-        if (swipeDistance > 0 && visibleIndex < visibleSlides.length - 1) {
-          targetSlide = visibleSlides[visibleIndex + 1] ?? nearestSlide;
-        } else if (swipeDistance < 0 && visibleIndex > 0) {
-          targetSlide = visibleSlides[visibleIndex - 1] ?? nearestSlide;
-        } else {
-          targetSlide = nearestSlide;
-        }
-        smoothScrollTo(targetSlide.offsetLeft, easeOutCubic);
-      } else if (nearestSlide) {
-        smoothScrollTo(nearestSlide.offsetLeft, easeOutCubic);
+      const nearestSlide = findNearestSlide(feed, slides, direction);
+      if (nearestSlide) {
+        const targetPosition = isVertical ? nearestSlide.offsetTop : nearestSlide.offsetLeft;
+        smoothScrollTo(targetPosition, easeOutCubic);
       }
       onDragEnd?.();
     }
   };
-  feed.style.cursor = "grab";
   feed.addEventListener("mousedown", handleDragStart, { signal: abortSignal });
   document.addEventListener("mousemove", handleDragMove, { signal: abortSignal });
   document.addEventListener("mouseup", handleDragEnd, { signal: abortSignal });
@@ -301,6 +310,67 @@ var generateBullets = ({
   return bullets;
 };
 
+// src/core/thumbs.ts
+var generateThumbs = ({
+  thumbsContainer,
+  slides,
+  thumbClass,
+  thumbActiveClass,
+  feedId,
+  thumbImageSelector = "img",
+  thumbSize
+}) => {
+  if (!thumbsContainer || !(thumbsContainer instanceof HTMLElement)) {
+    throw new Error("Invalid thumbsContainer: must be a valid HTMLElement");
+  }
+  if (!Array.isArray(slides) || slides.length === 0) {
+    throw new Error("Invalid slides: must be a non-empty array");
+  }
+  if (!feedId || typeof feedId !== "string") {
+    throw new Error("Invalid feedId: must be a non-empty string");
+  }
+  if (!thumbClass || typeof thumbClass !== "string") {
+    throw new Error("Invalid thumbClass: must be a non-empty string");
+  }
+  thumbsContainer.innerHTML = "";
+  thumbsContainer.setAttribute("role", "tablist");
+  thumbsContainer.setAttribute("aria-label", "Slide thumbnails");
+  const visibleSlides = slides.map((slide, originalIndex) => ({ slide, originalIndex })).filter(({ slide }) => slide.offsetParent !== null);
+  if (visibleSlides.length === 0) {
+    console.warn("No visible slides found");
+    return [];
+  }
+  const thumbs = visibleSlides.map(({ slide, originalIndex }, visibleIndex) => {
+    const thumb = document.createElement("button");
+    thumb.type = "button";
+    thumb.classList.add(thumbClass);
+    if (visibleIndex === 0) {
+      thumb.classList.add(thumbActiveClass);
+    }
+    const sourceImage = slide.querySelector(thumbImageSelector);
+    if (sourceImage?.src) {
+      const thumbImg = document.createElement("img");
+      thumbImg.src = sourceImage.src;
+      thumbImg.alt = sourceImage.alt || `Slide ${visibleIndex + 1} thumbnail`;
+      thumbImg.draggable = false;
+      if (thumbSize) {
+        thumbImg.style.width = `${thumbSize.width}px`;
+        thumbImg.style.height = `${thumbSize.height}px`;
+        thumbImg.style.objectFit = "cover";
+      }
+      thumb.appendChild(thumbImg);
+    }
+    thumb.setAttribute("role", "tab");
+    thumb.setAttribute("aria-selected", visibleIndex === 0 ? "true" : "false");
+    thumb.setAttribute("aria-controls", feedId);
+    thumb.setAttribute("aria-label", `Go to slide ${visibleIndex + 1}`);
+    thumb.setAttribute("data-slide-index", String(visibleIndex));
+    thumbsContainer.appendChild(thumb);
+    return thumb;
+  });
+  return thumbs;
+};
+
 // src/core/marquee.ts
 var createMarqueeState = () => ({
   initialized: false,
@@ -415,6 +485,72 @@ var attachMarqueeEventListeners = (settings, state, signal) => {
   );
 };
 
+// src/core/styles.ts
+var CRITICAL_STYLES = `
+/* Lazer Slider - Critical Styles (Auto-injected) */
+.lazer-feed {
+  position: relative;
+  display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  scroll-snap-type: x mandatory;
+}
+
+.lazer-feed::-webkit-scrollbar {
+  display: none;
+}
+
+.lazer-feed.lazer-vertical {
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scroll-snap-type: y mandatory;
+}
+
+.lazer-slide {
+  scroll-snap-align: start;
+  flex-shrink: 0;
+}
+
+.lazer-feed.is-dragging {
+  cursor: grabbing;
+  user-select: none;
+  scroll-snap-type: none;
+}
+
+.lazer-feed:not(.is-dragging) {
+  cursor: grab;
+}
+`;
+var stylesInjected = false;
+var STYLE_ID = "lazer-slider-critical-styles";
+var injectStyles = () => {
+  if (stylesInjected || typeof document === "undefined") return;
+  const existingStyle = document.getElementById(STYLE_ID);
+  if (existingStyle) {
+    stylesInjected = true;
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = CRITICAL_STYLES;
+  document.head.appendChild(style);
+  stylesInjected = true;
+};
+var injectStylesOnce = () => {
+  injectStyles();
+};
+var removeStyles = () => {
+  if (typeof document === "undefined") return;
+  const style = document.getElementById(STYLE_ID);
+  if (style) {
+    style.remove();
+    stylesInjected = false;
+  }
+};
+
 // src/core/slider.ts
 var ANIMATION = {
   MIN_DURATION: 400,
@@ -425,6 +561,7 @@ var ANIMATION = {
 };
 var DESKTOP_BREAKPOINT = "(min-width: 64rem)";
 var createSlider = (settings) => {
+  injectStylesOnce();
   if (!settings.feed) {
     throw new Error("lazer-slider: feed element is required");
   }
@@ -434,16 +571,40 @@ var createSlider = (settings) => {
   if (!settings.feed.id) {
     settings.feed.id = `lazer-slider-feed-${Math.random().toString(36).substr(2, 9)}`;
   }
+  settings.feed.classList.add("lazer-feed");
+  settings.slides.forEach((slide) => {
+    slide.classList.add("lazer-slide");
+  });
   if (settings.bulletsContainer && !settings.thumbs) {
     const bullets = generateBullets({
       bulletsContainer: settings.bulletsContainer,
       slides: settings.slides,
-      bulletClass: settings.bulletsClass ?? "slider-bullet",
+      bulletClass: settings.bulletsClass ?? "lazer-bullet",
       bulletActiveClass: settings.bulletsActiveClass ?? "active",
       feedId: settings.feed.id
     });
     settings.thumbs = bullets;
   }
+  if (settings.thumbsContainer && !settings.thumbs) {
+    const thumbs = generateThumbs({
+      thumbsContainer: settings.thumbsContainer,
+      slides: settings.slides,
+      thumbClass: settings.thumbsClass ?? "lazer-thumb",
+      thumbActiveClass: settings.thumbsActiveClass ?? "active",
+      feedId: settings.feed.id,
+      thumbImageSelector: settings.thumbImageSelector ?? "img",
+      thumbSize: settings.thumbSize
+    });
+    settings.thumbs = thumbs;
+  }
+  const direction = settings.direction ?? "horizontal";
+  const isVertical = direction === "vertical";
+  if (isVertical) {
+    settings.feed.classList.add("lazer-vertical");
+  }
+  if (settings.marquee) {
+    settings.feed.classList.add("lazer-marquee");
+  }
   const state = {
     currentSlideIndex: 0,
     isScrolling: false,
@@ -452,7 +613,6 @@ var createSlider = (settings) => {
     lastWidth: 0,
     updateThumbTimeout: null,
     scrollEndTimeout: null,
-    resizeTimeout: null,
     abortController: new AbortController(),
     autoplayIntervalId: null,
     autoplayPaused: false,
@@ -471,10 +631,10 @@ var createSlider = (settings) => {
   const marqueeState = createMarqueeState();
   const easing = settings.easing ?? easeOutExpo;
   const getFeedRect = () => {
-    const currentWidth = settings.feed.clientWidth;
-    if (!state.cachedFeedRect || state.lastWidth !== currentWidth) {
+    const currentSize = isVertical ? settings.feed.clientHeight : settings.feed.clientWidth;
+    if (!state.cachedFeedRect || state.lastWidth !== currentSize) {
       state.cachedFeedRect = settings.feed.getBoundingClientRect();
-      state.lastWidth = currentWidth;
+      state.lastWidth = currentSize;
     }
     return state.cachedFeedRect;
   };
@@ -517,26 +677,38 @@ var createSlider = (settings) => {
     requestAnimationFrame(() => {
       const firstRealSlide = realSlides[0];
       if (firstRealSlide) {
-        settings.feed.scrollLeft = firstRealSlide.offsetLeft;
+        if (isVertical) {
+          settings.feed.scrollTop = firstRealSlide.offsetTop;
+        } else {
+          settings.feed.scrollLeft = firstRealSlide.offsetLeft;
+        }
       }
     });
     loopState.initialized = true;
   };
-  const handleLoopReposition = (direction) => {
+  const handleLoopReposition = (navDirection) => {
     if (!settings.loop || !loopState.initialized) return;
     state.isLoopRepositioning = true;
     const realSlides = loopState.realSlides;
     const totalRealSlides = realSlides.length;
-    if (direction === "next") {
+    if (navDirection === "next") {
       const firstRealSlide = realSlides[0];
       if (firstRealSlide) {
-        settings.feed.scrollLeft = firstRealSlide.offsetLeft;
+        if (isVertical) {
+          settings.feed.scrollTop = firstRealSlide.offsetTop;
+        } else {
+          settings.feed.scrollLeft = firstRealSlide.offsetLeft;
+        }
       }
       state.currentSlideIndex = 0;
     } else {
       const lastRealSlide = realSlides[totalRealSlides - 1];
       if (lastRealSlide) {
-        settings.feed.scrollLeft = lastRealSlide.offsetLeft;
+        if (isVertical) {
+          settings.feed.scrollTop = lastRealSlide.offsetTop;
+        } else {
+          settings.feed.scrollLeft = lastRealSlide.offsetLeft;
+        }
       }
       state.currentSlideIndex = totalRealSlides - 1;
     }
@@ -566,39 +738,74 @@ var createSlider = (settings) => {
       settings.slides.forEach((slide) => {
         slide.style.flex = "";
         slide.style.minWidth = "";
+        slide.style.minHeight = "";
       });
       return;
     }
-    const totalGapWidth = gap * (perView - 1);
-    const slideWidth = `calc((100% - ${totalGapWidth}px) / ${perView})`;
-    settings.slides.forEach((slide) => {
-      slide.style.flex = `0 0 ${slideWidth}`;
-      slide.style.minWidth = slideWidth;
-    });
+    const totalGapSize = gap * (perView - 1);
+    const slideSize = `calc((100% - ${totalGapSize}px) / ${perView})`;
+    if (isVertical) {
+      settings.slides.forEach((slide) => {
+        slide.style.flex = `0 0 ${slideSize}`;
+        slide.style.minHeight = slideSize;
+        slide.style.minWidth = "";
+      });
+    } else {
+      settings.slides.forEach((slide) => {
+        slide.style.flex = `0 0 ${slideSize}`;
+        slide.style.minWidth = slideSize;
+        slide.style.minHeight = "";
+      });
+    }
   };
   const updateScrollbar = () => {
     if (!settings.scrollbarThumb) return;
     const feedRect = getFeedRect();
-    const thumbWidth = feedRect.width / settings.feed.scrollWidth * 100;
-    settings.scrollbarThumb.style.width = `${thumbWidth}%`;
+    if (isVertical) {
+      const thumbHeight = feedRect.height / settings.feed.scrollHeight * 100;
+      settings.scrollbarThumb.style.height = `${thumbHeight}%`;
+      settings.scrollbarThumb.style.width = "";
+    } else {
+      const thumbWidth = feedRect.width / settings.feed.scrollWidth * 100;
+      settings.scrollbarThumb.style.width = `${thumbWidth}%`;
+      settings.scrollbarThumb.style.height = "";
+    }
   };
   const updateScrollbarPosition = () => {
     if (!settings.scrollbarThumb || !settings.scrollbarTrack) return;
-    const trackWidth = settings.scrollbarTrack.getBoundingClientRect().width;
-    const thumbWidth = settings.scrollbarThumb.getBoundingClientRect().width;
-    const totalTransform = trackWidth - thumbWidth;
-    const maxScroll = settings.feed.scrollWidth - settings.feed.clientWidth;
-    const scrollProgress = maxScroll > 0 ? settings.feed.scrollLeft / maxScroll : 0;
-    settings.scrollbarThumb.style.transform = `translateX(${totalTransform * scrollProgress}px)`;
+    if (isVertical) {
+      const trackHeight = settings.scrollbarTrack.getBoundingClientRect().height;
+      const thumbHeight = settings.scrollbarThumb.getBoundingClientRect().height;
+      const totalTransform = trackHeight - thumbHeight;
+      const maxScroll = settings.feed.scrollHeight - settings.feed.clientHeight;
+      const scrollProgress = maxScroll > 0 ? settings.feed.scrollTop / maxScroll : 0;
+      settings.scrollbarThumb.style.transform = `translateY(${totalTransform * scrollProgress}px)`;
+    } else {
+      const trackWidth = settings.scrollbarTrack.getBoundingClientRect().width;
+      const thumbWidth = settings.scrollbarThumb.getBoundingClientRect().width;
+      const totalTransform = trackWidth - thumbWidth;
+      const maxScroll = settings.feed.scrollWidth - settings.feed.clientWidth;
+      const scrollProgress = maxScroll > 0 ? settings.feed.scrollLeft / maxScroll : 0;
+      settings.scrollbarThumb.style.transform = `translateX(${totalTransform * scrollProgress}px)`;
+    }
   };
   const updateControlsVisibility = () => {
     if (state.isLoopRepositioning) {
       return;
     }
     const feedRect = getFeedRect();
-    const isAtStart = settings.feed.scrollLeft <= 1;
-    const isAtEnd = settings.feed.scrollLeft + feedRect.width >= settings.feed.scrollWidth - 1;
-    const shouldHideScrollbar = settings.feed.scrollWidth <= feedRect.width;
+    let isAtStart;
+    let isAtEnd;
+    let shouldHideScrollbar;
+    if (isVertical) {
+      isAtStart = settings.feed.scrollTop <= 1;
+      isAtEnd = settings.feed.scrollTop + feedRect.height >= settings.feed.scrollHeight - 1;
+      shouldHideScrollbar = settings.feed.scrollHeight <= feedRect.height;
+    } else {
+      isAtStart = settings.feed.scrollLeft <= 1;
+      isAtEnd = settings.feed.scrollLeft + feedRect.width >= settings.feed.scrollWidth - 1;
+      shouldHideScrollbar = settings.feed.scrollWidth <= feedRect.width;
+    }
     if (settings.scrollbarTrack) {
       settings.scrollbarTrack.style.display = shouldHideScrollbar ? "none" : "block";
     }
@@ -632,21 +839,25 @@ var createSlider = (settings) => {
     const viewportVisibleSlides = slidesToCheck.filter((slide) => {
       const slideRect = slide.getBoundingClientRect();
       const tolerance = 20;
+      if (isVertical) {
+        return slideRect.bottom > feedRect.top + tolerance && slideRect.top < feedRect.bottom - tolerance;
+      }
       return slideRect.right > feedRect.left + tolerance && slideRect.left < feedRect.right - tolerance;
     });
     if (viewportVisibleSlides.length && viewportVisibleSlides[0]) {
       const newIndex = slidesToCheck.indexOf(viewportVisibleSlides[0]);
       if (newIndex !== -1) {
         state.currentSlideIndex = newIndex;
+        const currentScroll = isVertical ? settings.feed.scrollTop : settings.feed.scrollLeft;
         settings.onScroll?.({
-          currentScroll: settings.feed.scrollLeft,
+          currentScroll,
           currentSlideIndex: state.currentSlideIndex
         });
       }
     }
   };
   const smoothScrollTo = (target, customEasing = easing, onComplete) => {
-    const start = settings.feed.scrollLeft;
+    const start = isVertical ? settings.feed.scrollTop : settings.feed.scrollLeft;
     const distance = Math.abs(target - start);
     const duration = Math.min(
       ANIMATION.MAX_DURATION,
@@ -657,11 +868,20 @@ var createSlider = (settings) => {
       const elapsed = (currentTime - startTime) / duration;
       const progress = Math.min(elapsed, 1);
       const ease = customEasing(progress);
-      settings.feed.scrollLeft = start + (target - start) * ease;
+      const scrollPosition = start + (target - start) * ease;
+      if (isVertical) {
+        settings.feed.scrollTop = scrollPosition;
+      } else {
+        settings.feed.scrollLeft = scrollPosition;
+      }
       if (progress < 1) {
         requestAnimationFrame(animateScroll);
       } else {
-        settings.feed.scrollLeft = target;
+        if (isVertical) {
+          settings.feed.scrollTop = target;
+        } else {
+          settings.feed.scrollLeft = target;
+        }
         onComplete?.();
       }
     };
@@ -680,16 +900,17 @@ var createSlider = (settings) => {
     state.updateThumbTimeout = setTimeout(() => {
       state.isScrolling = false;
     }, ANIMATION.THUMB_UPDATE_DELAY);
-    smoothScrollTo(settings.slides[index].offsetLeft);
+    const targetPosition = isVertical ? settings.slides[index].offsetTop : settings.slides[index].offsetLeft;
+    smoothScrollTo(targetPosition);
   };
-  const handleNavButtonClick = (direction) => {
+  const handleNavButtonClick = (navDirection) => {
     const realSlides = loopState.initialized ? loopState.realSlides : getVisibleSlides();
     const slidesToScroll = isDesktop() ? settings.desktopSlidesPerScroll ?? 1 : settings.mobileSlidesPerScroll ?? 1;
     const totalRealSlides = realSlides.length;
     updateCurrentSlideIndex();
     let targetSlide;
     let needsReposition = false;
-    if (direction === "prev") {
+    if (navDirection === "prev") {
       if (settings.loop && loopState.initialized && state.currentSlideIndex === 0) {
         const prependedClones = loopState.clonedSlides.filter(
           (clone) => clone.getAttribute("data-lazer-clone") === "prepend"
@@ -716,17 +937,19 @@ var createSlider = (settings) => {
       }
     }
     if (!targetSlide) return;
+    const currentScroll = isVertical ? settings.feed.scrollTop : settings.feed.scrollLeft;
     settings.onScrollStart?.({
-      currentScroll: settings.feed.scrollLeft,
+      currentScroll,
       target: targetSlide,
-      direction
+      direction: navDirection
     });
+    const targetPosition = isVertical ? targetSlide.offsetTop : targetSlide.offsetLeft;
     if (needsReposition) {
-      smoothScrollTo(targetSlide.offsetLeft, easing, () => {
-        handleLoopReposition(direction);
+      smoothScrollTo(targetPosition, easing, () => {
+        handleLoopReposition(navDirection);
       });
     } else {
-      smoothScrollTo(targetSlide.offsetLeft);
+      smoothScrollTo(targetPosition);
     }
   };
   const updateScrollPosition = () => {
@@ -741,8 +964,9 @@ var createSlider = (settings) => {
     }
     state.scrollEndTimeout = setTimeout(() => {
       state.isScrolling = false;
+      const currentScroll = isVertical ? settings.feed.scrollTop : settings.feed.scrollLeft;
       settings.onScrollEnd?.({
-        currentScroll: settings.feed.scrollLeft,
+        currentScroll,
         currentSlideIndex: state.currentSlideIndex
       });
     }, ANIMATION.SCROLL_END_DELAY);
@@ -757,20 +981,8 @@ var createSlider = (settings) => {
     }
   };
   const handleWindowResize = () => {
-    if (state.resizeTimeout) {
-      clearTimeout(state.resizeTimeout);
-    }
-    state.resizeTimeout = setTimeout(() => {
-      state.cachedFeedRect = null;
-      updateCurrentSlideIndex();
-      const currentIndex = state.currentSlideIndex;
-      refresh();
-      const slides = loopState.initialized ? loopState.realSlides : getVisibleSlides();
-      const targetSlide = slides[currentIndex];
-      if (targetSlide) {
-        settings.feed.scrollLeft = targetSlide.offsetLeft;
-      }
-    }, 150);
+    state.cachedFeedRect = null;
+    refresh();
   };
   const attachEventListeners = () => {
     const { signal } = state.abortController;
@@ -803,9 +1015,10 @@ var createSlider = (settings) => {
       settings.feed,
       () => handleNavButtonClick("prev"),
       () => handleNavButtonClick("next"),
-      signal
+      signal,
+      direction
     );
-    if (settings.enableDragToScroll) {
+    if (settings.enableDragToScroll !== false) {
       dragState = setupDragToScroll({
         feed: settings.feed,
         slides: settings.slides,
@@ -815,7 +1028,7 @@ var createSlider = (settings) => {
           updateCurrentSlideIndex();
           updateActiveThumb(settings.thumbs, state.currentSlideIndex);
         },
-        dragFree: settings.dragFree
+        direction
       });
     }
     if (settings.autoplay && settings.pauseOnHover !== false) {
@@ -870,7 +1083,8 @@ var createSlider = (settings) => {
     if (!targetSlide) return;
     state.currentSlideIndex = safeIndex;
     updateActiveThumb(settings.thumbs, safeIndex);
-    smoothScrollTo(targetSlide.offsetLeft);
+    const targetPosition = isVertical ? targetSlide.offsetTop : targetSlide.offsetLeft;
+    smoothScrollTo(targetPosition);
   };
   const refresh = () => {
     state.cachedFeedRect = null;
@@ -892,9 +1106,6 @@ var createSlider = (settings) => {
     if (state.scrollEndTimeout) {
       clearTimeout(state.scrollEndTimeout);
     }
-    if (state.resizeTimeout) {
-      clearTimeout(state.resizeTimeout);
-    }
     if (dragState) {
       cleanupDrag(dragState);
     }
@@ -950,6 +1161,9 @@ export {
   easeOutExpo,
   easeOutQuad,
   generateBullets,
-  linear
+  generateThumbs,
+  injectStyles,
+  linear,
+  removeStyles
 };
 //# sourceMappingURL=index.js.map