lazer-slider 1.0.5 → 1.0.7

package/dist/index.d.cts

@@ -6,6 +6,10 @@ type EasingFunction = (t: number) => number;
  * Direction of slider navigation
  */
 type SliderDirection = 'prev' | 'next';
+/**
+ * Direction of marquee scroll
+ */
+type MarqueeDirection = 'left' | 'right';
 /**
  * Parameters passed to scroll start callback
  */
@@ -64,6 +68,12 @@ interface SliderSettings {
     autoplayInterval?: number;
     /** Pause autoplay on hover/touch (default: true) */
     pauseOnHover?: boolean;
+    /** Enable marquee mode (continuous scroll, overrides autoplay/loop) */
+    marquee?: boolean;
+    /** Marquee scroll speed in pixels per second (default: 50) */
+    marqueeSpeed?: number;
+    /** Marquee scroll direction (default: 'left') */
+    marqueeDirection?: MarqueeDirection;
     /** Custom easing function for smooth scroll animation */
     easing?: EasingFunction;
     /** Callback fired when scroll animation starts */
@@ -97,6 +107,12 @@ interface SliderState {
     autoplayIntervalId: ReturnType<typeof setInterval> | null;
     /** Whether autoplay is currently paused */
     autoplayPaused: boolean;
+    /** Animation frame ID for marquee */
+    marqueeAnimationId: number | null;
+    /** Whether marquee is currently paused */
+    marqueePaused: boolean;
+    /** Last timestamp for marquee animation (for delta time calculation) */
+    marqueeLastTimestamp: number;
 }
 /**
  * Drag state for drag-to-scroll functionality
@@ -164,4 +180,4 @@ declare const easeOutQuad: EasingFunction;
  */
 declare const linear: EasingFunction;
 
-export { type DragState, type EasingFunction, type ScrollParams, type ScrollStartParams, type Slider, type SliderDirection, type SliderSettings, type SliderState, createSlider, easeInOutCubic, easeOutCubic, easeOutExpo, easeOutQuad, linear };
+export { type DragState, type EasingFunction, type MarqueeDirection, type ScrollParams, type ScrollStartParams, type Slider, type SliderDirection, type SliderSettings, type SliderState, createSlider, easeInOutCubic, easeOutCubic, easeOutExpo, easeOutQuad, linear };

package/dist/index.d.ts

@@ -6,6 +6,10 @@ type EasingFunction = (t: number) => number;
  * Direction of slider navigation
  */
 type SliderDirection = 'prev' | 'next';
+/**
+ * Direction of marquee scroll
+ */
+type MarqueeDirection = 'left' | 'right';
 /**
  * Parameters passed to scroll start callback
  */
@@ -64,6 +68,12 @@ interface SliderSettings {
     autoplayInterval?: number;
     /** Pause autoplay on hover/touch (default: true) */
     pauseOnHover?: boolean;
+    /** Enable marquee mode (continuous scroll, overrides autoplay/loop) */
+    marquee?: boolean;
+    /** Marquee scroll speed in pixels per second (default: 50) */
+    marqueeSpeed?: number;
+    /** Marquee scroll direction (default: 'left') */
+    marqueeDirection?: MarqueeDirection;
     /** Custom easing function for smooth scroll animation */
     easing?: EasingFunction;
     /** Callback fired when scroll animation starts */
@@ -97,6 +107,12 @@ interface SliderState {
     autoplayIntervalId: ReturnType<typeof setInterval> | null;
     /** Whether autoplay is currently paused */
     autoplayPaused: boolean;
+    /** Animation frame ID for marquee */
+    marqueeAnimationId: number | null;
+    /** Whether marquee is currently paused */
+    marqueePaused: boolean;
+    /** Last timestamp for marquee animation (for delta time calculation) */
+    marqueeLastTimestamp: number;
 }
 /**
  * Drag state for drag-to-scroll functionality
@@ -164,4 +180,4 @@ declare const easeOutQuad: EasingFunction;
  */
 declare const linear: EasingFunction;
 
-export { type DragState, type EasingFunction, type ScrollParams, type ScrollStartParams, type Slider, type SliderDirection, type SliderSettings, type SliderState, createSlider, easeInOutCubic, easeOutCubic, easeOutExpo, easeOutQuad, linear };
+export { type DragState, type EasingFunction, type MarqueeDirection, type ScrollParams, type ScrollStartParams, type Slider, type SliderDirection, type SliderSettings, type SliderState, createSlider, easeInOutCubic, easeOutCubic, easeOutExpo, easeOutQuad, linear };

package/dist/index.js

@@ -234,6 +234,108 @@ var cleanupDrag = (state) => {
   }
 };
 
+// src/core/marquee.ts
+var createMarqueeState = () => ({
+  initialized: false,
+  clonedSlides: []
+});
+var setupMarqueeClones = (settings, marqueeState) => {
+  if (marqueeState.initialized) return;
+  settings.slides.forEach((slide) => {
+    const clone = slide.cloneNode(true);
+    clone.setAttribute("data-lazer-marquee-clone", "true");
+    clone.setAttribute("aria-hidden", "true");
+    settings.feed.appendChild(clone);
+    marqueeState.clonedSlides.push(clone);
+  });
+  marqueeState.initialized = true;
+};
+var cleanupMarqueeClones = (marqueeState) => {
+  if (!marqueeState.initialized) return;
+  marqueeState.clonedSlides.forEach((clone) => {
+    clone.remove();
+  });
+  marqueeState.clonedSlides = [];
+  marqueeState.initialized = false;
+};
+var handleMarqueeLoop = (settings) => {
+  const direction = settings.marqueeDirection ?? "left";
+  const halfWidth = settings.feed.scrollWidth / 2;
+  if (direction === "left") {
+    if (settings.feed.scrollLeft >= halfWidth) {
+      settings.feed.scrollLeft = settings.feed.scrollLeft - halfWidth;
+    }
+  } else {
+    if (settings.feed.scrollLeft <= 0) {
+      settings.feed.scrollLeft = halfWidth;
+    }
+  }
+};
+var startMarquee = (settings, state) => {
+  if (state.marqueeAnimationId) return;
+  const speed = settings.marqueeSpeed ?? 50;
+  const direction = settings.marqueeDirection ?? "left";
+  const directionMultiplier = direction === "left" ? 1 : -1;
+  if (direction === "right") {
+    settings.feed.scrollLeft = settings.feed.scrollWidth / 2;
+  }
+  const animate = (timestamp) => {
+    if (state.marqueePaused) {
+      state.marqueeLastTimestamp = timestamp;
+      state.marqueeAnimationId = requestAnimationFrame(animate);
+      return;
+    }
+    const deltaTime = state.marqueeLastTimestamp ? (timestamp - state.marqueeLastTimestamp) / 1e3 : 0;
+    state.marqueeLastTimestamp = timestamp;
+    const movement = speed * deltaTime * directionMultiplier;
+    settings.feed.scrollLeft += movement;
+    handleMarqueeLoop(settings);
+    state.marqueeAnimationId = requestAnimationFrame(animate);
+  };
+  state.marqueeAnimationId = requestAnimationFrame(animate);
+};
+var stopMarquee = (state) => {
+  if (state.marqueeAnimationId) {
+    cancelAnimationFrame(state.marqueeAnimationId);
+    state.marqueeAnimationId = null;
+  }
+  state.marqueeLastTimestamp = 0;
+};
+var pauseMarquee = (state) => {
+  state.marqueePaused = true;
+};
+var resumeMarquee = (state) => {
+  state.marqueePaused = false;
+};
+var setupMarquee = (settings, state, marqueeState) => {
+  if (!settings.marquee) return;
+  setupMarqueeClones(settings, marqueeState);
+  startMarquee(settings, state);
+};
+var attachMarqueeEventListeners = (settings, state, signal) => {
+  if (!settings.marquee || settings.pauseOnHover === false) return;
+  settings.feed.addEventListener(
+    "mouseenter",
+    () => pauseMarquee(state),
+    { signal }
+  );
+  settings.feed.addEventListener(
+    "mouseleave",
+    () => resumeMarquee(state),
+    { signal }
+  );
+  settings.feed.addEventListener(
+    "touchstart",
+    () => pauseMarquee(state),
+    { passive: true, signal }
+  );
+  settings.feed.addEventListener(
+    "touchend",
+    () => resumeMarquee(state),
+    { signal }
+  );
+};
+
 // src/core/slider.ts
 var ANIMATION = {
   MIN_DURATION: 400,
@@ -260,9 +362,19 @@ var createSlider = (settings) => {
     scrollEndTimeout: null,
     abortController: new AbortController(),
     autoplayIntervalId: null,
-    autoplayPaused: false
+    autoplayPaused: false,
+    marqueeAnimationId: null,
+    marqueePaused: false,
+    marqueeLastTimestamp: 0
   };
   let dragState = null;
+  const loopState = {
+    initialized: false,
+    clonedSlides: [],
+    realSlides: [...settings.slides],
+    clonesPerSide: 0
+  };
+  const marqueeState = createMarqueeState();
   const easing = settings.easing ?? easeOutExpo;
   const getFeedRect = () => {
     const currentWidth = settings.feed.clientWidth;
@@ -278,6 +390,71 @@ var createSlider = (settings) => {
   const isDesktop = () => {
     return window.matchMedia(DESKTOP_BREAKPOINT).matches;
   };
+  const getLoopClonesCount = () => {
+    const perView = isDesktop() ? settings.desktopSlidesPerView : settings.mobileSlidesPerView;
+    if (!perView || perView === "auto") {
+      return 1;
+    }
+    return Math.ceil(perView);
+  };
+  const setupLoopClones = () => {
+    if (!settings.loop || loopState.initialized) return;
+    const realSlides = loopState.realSlides;
+    const clonesCount = getLoopClonesCount();
+    loopState.clonesPerSide = clonesCount;
+    for (let i = realSlides.length - clonesCount; i < realSlides.length; i++) {
+      const slide = realSlides[i];
+      if (!slide) continue;
+      const clone = slide.cloneNode(true);
+      clone.setAttribute("data-lazer-clone", "prepend");
+      clone.setAttribute("aria-hidden", "true");
+      settings.feed.insertBefore(clone, settings.feed.firstChild);
+      loopState.clonedSlides.push(clone);
+    }
+    for (let i = 0; i < clonesCount; i++) {
+      const slide = realSlides[i];
+      if (!slide) continue;
+      const clone = slide.cloneNode(true);
+      clone.setAttribute("data-lazer-clone", "append");
+      clone.setAttribute("aria-hidden", "true");
+      settings.feed.appendChild(clone);
+      loopState.clonedSlides.push(clone);
+    }
+    requestAnimationFrame(() => {
+      const firstRealSlide = realSlides[0];
+      if (firstRealSlide) {
+        settings.feed.scrollLeft = firstRealSlide.offsetLeft;
+      }
+    });
+    loopState.initialized = true;
+  };
+  const handleLoopReposition = (direction) => {
+    if (!settings.loop || !loopState.initialized) return;
+    const realSlides = loopState.realSlides;
+    const totalRealSlides = realSlides.length;
+    if (direction === "next") {
+      const firstRealSlide = realSlides[0];
+      if (firstRealSlide) {
+        settings.feed.scrollLeft = firstRealSlide.offsetLeft;
+      }
+      state.currentSlideIndex = 0;
+    } else {
+      const lastRealSlide = realSlides[totalRealSlides - 1];
+      if (lastRealSlide) {
+        settings.feed.scrollLeft = lastRealSlide.offsetLeft;
+      }
+      state.currentSlideIndex = totalRealSlides - 1;
+    }
+  };
+  const cleanupLoopClones = () => {
+    if (!loopState.initialized) return;
+    loopState.clonedSlides.forEach((clone) => {
+      clone.remove();
+    });
+    loopState.clonedSlides = [];
+    loopState.initialized = false;
+    loopState.clonesPerSide = 0;
+  };
   const applySlideWidths = () => {
     const perView = isDesktop() ? settings.desktopSlidesPerView : settings.mobileSlidesPerView;
     const gap = settings.slideGap ?? 0;
@@ -347,14 +524,14 @@ var createSlider = (settings) => {
   };
   const updateCurrentSlideIndex = () => {
     const feedRect = getFeedRect();
-    const allVisibleSlides = getVisibleSlides();
-    const viewportVisibleSlides = settings.slides.filter((slide) => {
+    const slidesToCheck = loopState.initialized ? loopState.realSlides : getVisibleSlides();
+    const viewportVisibleSlides = slidesToCheck.filter((slide) => {
       const slideRect = slide.getBoundingClientRect();
       const tolerance = 20;
       return slideRect.right > feedRect.left + tolerance && slideRect.left < feedRect.right - tolerance;
     });
     if (viewportVisibleSlides.length && viewportVisibleSlides[0]) {
-      const newIndex = allVisibleSlides.indexOf(viewportVisibleSlides[0]);
+      const newIndex = slidesToCheck.indexOf(viewportVisibleSlides[0]);
       if (newIndex !== -1) {
         state.currentSlideIndex = newIndex;
         settings.onScroll?.({
@@ -364,7 +541,7 @@ var createSlider = (settings) => {
       }
     }
   };
-  const smoothScrollTo = (target, customEasing = easing) => {
+  const smoothScrollTo = (target, customEasing = easing, onComplete) => {
     const start = settings.feed.scrollLeft;
     const distance = Math.abs(target - start);
     const duration = Math.min(
@@ -381,6 +558,7 @@ var createSlider = (settings) => {
         requestAnimationFrame(animateScroll);
       } else {
         settings.feed.scrollLeft = target;
+        onComplete?.();
       }
     };
     requestAnimationFrame(animateScroll);
@@ -401,34 +579,51 @@ var createSlider = (settings) => {
     smoothScrollTo(settings.slides[index].offsetLeft);
   };
   const handleNavButtonClick = (direction) => {
-    const visibleSlides = getVisibleSlides();
+    const realSlides = loopState.initialized ? loopState.realSlides : getVisibleSlides();
     const slidesToScroll = isDesktop() ? settings.desktopSlidesPerScroll ?? 1 : settings.mobileSlidesPerScroll ?? 1;
-    const totalSlides = visibleSlides.length;
+    const totalRealSlides = realSlides.length;
     updateCurrentSlideIndex();
+    let targetSlide;
+    let needsReposition = false;
     if (direction === "prev") {
-      if (settings.loop && state.currentSlideIndex === 0) {
-        state.currentSlideIndex = totalSlides - 1;
+      if (settings.loop && loopState.initialized && state.currentSlideIndex === 0) {
+        const prependedClones = loopState.clonedSlides.filter(
+          (clone) => clone.getAttribute("data-lazer-clone") === "prepend"
+        );
+        targetSlide = prependedClones[prependedClones.length - 1];
+        needsReposition = true;
       } else {
         state.currentSlideIndex = Math.max(0, state.currentSlideIndex - slidesToScroll);
+        targetSlide = realSlides[state.currentSlideIndex];
       }
     } else {
-      if (settings.loop && state.currentSlideIndex >= totalSlides - 1) {
-        state.currentSlideIndex = 0;
+      if (settings.loop && loopState.initialized && state.currentSlideIndex >= totalRealSlides - 1) {
+        const appendedClones = loopState.clonedSlides.filter(
+          (clone) => clone.getAttribute("data-lazer-clone") === "append"
+        );
+        targetSlide = appendedClones[0];
+        needsReposition = true;
       } else {
         state.currentSlideIndex = Math.min(
-          totalSlides - 1,
+          totalRealSlides - 1,
           state.currentSlideIndex + slidesToScroll
         );
+        targetSlide = realSlides[state.currentSlideIndex];
       }
     }
-    const targetSlide = visibleSlides[state.currentSlideIndex];
     if (!targetSlide) return;
     settings.onScrollStart?.({
       currentScroll: settings.feed.scrollLeft,
       target: targetSlide,
       direction
     });
-    smoothScrollTo(targetSlide.offsetLeft);
+    if (needsReposition) {
+      smoothScrollTo(targetSlide.offsetLeft, easing, () => {
+        handleLoopReposition(direction);
+      });
+    } else {
+      smoothScrollTo(targetSlide.offsetLeft);
+    }
   };
   const updateScrollPosition = () => {
     updateScrollbarPosition();
@@ -528,6 +723,7 @@ var createSlider = (settings) => {
         { signal }
       );
     }
+    attachMarqueeEventListeners(settings, state, signal);
   };
   const startAutoplay = () => {
     if (state.autoplayIntervalId) return;
@@ -551,9 +747,9 @@ var createSlider = (settings) => {
     state.autoplayPaused = false;
   };
   const goToIndex = (index) => {
-    const visibleSlides = getVisibleSlides();
-    const safeIndex = Math.max(0, Math.min(index, visibleSlides.length - 1));
-    const targetSlide = visibleSlides[safeIndex];
+    const slides = loopState.initialized ? loopState.realSlides : getVisibleSlides();
+    const safeIndex = Math.max(0, Math.min(index, slides.length - 1));
+    const targetSlide = slides[safeIndex];
     if (!targetSlide) return;
     state.currentSlideIndex = safeIndex;
     updateActiveThumb(settings.thumbs, safeIndex);
@@ -567,6 +763,7 @@ var createSlider = (settings) => {
   };
   const unload = () => {
     stopAutoplay();
+    stopMarquee(state);
     state.abortController.abort();
     window.removeEventListener("resize", handleWindowResize);
     if (state.updateThumbTimeout) {
@@ -578,22 +775,43 @@ var createSlider = (settings) => {
     if (dragState) {
       cleanupDrag(dragState);
     }
+    cleanupLoopClones();
+    cleanupMarqueeClones(marqueeState);
     state.cachedFeedRect = null;
   };
   initAria(settings);
   applySlideWidths();
+  if (settings.marquee) {
+    setupMarquee(settings, state, marqueeState);
+  } else {
+    setupLoopClones();
+    if (settings.autoplay) {
+      startAutoplay();
+    }
+  }
   updateControlsVisibility();
   attachEventListeners();
   updateScrollbar();
-  if (settings.autoplay) {
-    startAutoplay();
-  }
+  const play = () => {
+    if (settings.marquee) {
+      startMarquee(settings, state);
+    } else if (settings.autoplay) {
+      startAutoplay();
+    }
+  };
+  const pause = () => {
+    if (settings.marquee) {
+      stopMarquee(state);
+    } else {
+      stopAutoplay();
+    }
+  };
   return {
     goToIndex,
     refresh,
     unload,
-    play: startAutoplay,
-    pause: stopAutoplay,
+    play,
+    pause,
     next: () => handleNavButtonClick("next"),
     prev: () => handleNavButtonClick("prev")
   };