lazer-slider 1.0.9 → 1.1.1

package/README.md

@@ -10,6 +10,7 @@ A lightweight, accessible slider with smooth scroll-to-snap animations, drag-to-
 - **Loop Mode** - Infinite loop navigation
 - **Autoplay** - Automatic slide advancement with pause on hover
 - **Marquee Mode** - Continuous smooth scrolling with seamless infinite loop
+- **Automatic Bullets** - Auto-generate navigation bullets from slides
 - **Accessible** - Full ARIA support, keyboard navigation (arrow keys)
 - **Lightweight** - Zero dependencies, ~20KB unminified
 - **TypeScript** - Full type definitions included
@@ -35,11 +36,7 @@ npm install lazer-slider
     <div class="slide">Slide 3</div>
   </div>
 
-  <div class="slider-dots">
-    <button class="dot"></button>
-    <button class="dot"></button>
-    <button class="dot"></button>
-  </div>
+  <div class="slider-bullets"></div>
 </div>
 ```
 
@@ -61,6 +58,27 @@ npm install lazer-slider
   scroll-snap-align: start;
   flex-shrink: 0;
 }
+
+.slider-bullets {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  margin-top: 16px;
+}
+
+.slider-bullet {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: none;
+  background: #ccc;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.slider-bullet.active {
+  background: #333;
+}
 ```
 
 ### JavaScript
@@ -73,7 +91,7 @@ const slider = createSlider({
   slides: [...document.querySelectorAll('.slide')],
   prevSlideButton: document.querySelector('.slider-prev'),
   nextSlideButton: document.querySelector('.slider-next'),
-  thumbs: [...document.querySelectorAll('.dot')],
+  bulletsContainer: document.querySelector('.slider-bullets'),
   enableDragToScroll: true
 })
 
@@ -96,7 +114,12 @@ slider.unload()
 |--------|------|---------|-------------|
 | `prevSlideButton` | `HTMLElement \| null` | `null` | Previous slide button |
 | `nextSlideButton` | `HTMLElement \| null` | `null` | Next slide button |
-| `thumbs` | `HTMLElement[]` | `undefined` | Thumbnail/dot elements for direct navigation |
+| `thumbs` | `HTMLElement[]` | `undefined` | Thumbnail/dot elements for direct navigation (manual) |
+| `bulletsContainer` | `HTMLElement \| null` | `null` | Container element for auto-generated bullets |
+| `bulletsClass` | `string` | `'slider-bullet'` | CSS class for bullet elements |
+| `bulletsActiveClass` | `string` | `'active'` | CSS class for active bullet element |
+
+> **Note:** When `bulletsContainer` is provided, bullets are automatically generated. If `thumbs` is also provided, `bulletsContainer` is ignored. Bullets are only generated for visible slides.
 
 ### Responsive
 
@@ -296,7 +319,66 @@ marquee.play()   // Resume marquee
 
 ### Bullets/Dots Navigation
 
-Use the `thumbs` option to add clickable dots that navigate to specific slides. The slider automatically manages the `active` class.
+You can add clickable dots that navigate to specific slides using either manual or automatic generation.
+
+#### Automatic Bullets (Recommended)
+
+The slider can automatically generate bullets from your slides. Just provide a container element:
+
+```html
+<div class="slider">
+  <div class="slider-feed">
+    <div class="slide">Slide 1</div>
+    <div class="slide">Slide 2</div>
+    <div class="slide">Slide 3</div>
+  </div>
+
+  <div class="slider-bullets"></div>
+</div>
+```
+
+```css
+.slider-bullets {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  margin-top: 16px;
+}
+
+.slider-bullet {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: none;
+  background: #ccc;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.slider-bullet.active {
+  background: #333;
+}
+```
+
+```typescript
+const slider = createSlider({
+  feed: document.querySelector('.slider-feed'),
+  slides: [...document.querySelectorAll('.slide')],
+  bulletsContainer: document.querySelector('.slider-bullets'),
+  bulletsClass: 'slider-bullet',      // Optional: default is 'slider-bullet'
+  bulletsActiveClass: 'active'        // Optional: default is 'active'
+})
+```
+
+**Features:**
+- Automatically generates one bullet per visible slide
+- Full ARIA support (`role="tablist"`, `aria-selected`, etc.)
+- Active state automatically managed
+- Only generates bullets for visible slides (hidden slides are skipped)
+
+#### Manual Bullets
+
+Alternatively, you can create bullets manually and pass them via the `thumbs` option:
 
 ```html
 <div class="slider">
@@ -345,6 +427,8 @@ const slider = createSlider({
 })
 ```
 
+> **Note:** If both `bulletsContainer` and `thumbs` are provided, `bulletsContainer` is ignored and manual `thumbs` are used instead.
+
 ### Custom Scrollbar
 
 Create a draggable scrollbar that syncs with the slider position.
@@ -432,7 +516,7 @@ const slider = createSlider({
   slides: [...document.querySelectorAll('.slide')],
   prevSlideButton: document.querySelector('.prev'),
   nextSlideButton: document.querySelector('.next'),
-  thumbs: [...document.querySelectorAll('.dot')],
+  bulletsContainer: document.querySelector('.slider-bullets'), // Auto-generated bullets
 
   // Responsive
   mobileSlidesPerView: 1,
@@ -469,6 +553,7 @@ Full TypeScript support with exported types:
 ```typescript
 import {
   createSlider,
+  generateBullets,
   type SliderSettings,
   type Slider,
   type EasingFunction,
@@ -479,6 +564,8 @@ import {
 } from 'lazer-slider'
 ```
 
+> **Note:** `generateBullets` is also exported if you need to manually generate bullets outside of the slider initialization.
+
 ## Browser Support
 
 - Chrome (latest)

package/dist/index.cjs

@@ -25,6 +25,7 @@ __export(index_exports, {
   easeOutCubic: () => easeOutCubic,
   easeOutExpo: () => easeOutExpo,
   easeOutQuad: () => easeOutQuad,
+  generateBullets: () => generateBullets,
   linear: () => linear
 });
 module.exports = __toCommonJS(index_exports);
@@ -191,7 +192,7 @@ var getEventX = (event) => {
   return event.clientX;
 };
 var setupDragToScroll = (config) => {
-  const { feed, slides, abortSignal, smoothScrollTo, onDragEnd } = config;
+  const { feed, slides, abortSignal, smoothScrollTo, onDragEnd, dragFree = false } = config;
   const state = createDragState();
   const handleDragStart = (event) => {
     if (state.momentumId !== null) {
@@ -231,11 +232,33 @@ var setupDragToScroll = (config) => {
     state.isDragging = false;
     feed.style.cursor = "grab";
     feed.style.userSelect = "";
-    if (Math.abs(state.velocity) > 1) {
-      applyMomentum(state, feed, slides, smoothScrollTo, onDragEnd);
+    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?.();
+      }
     } else {
+      const swipeDistance = state.startX - state.lastX;
+      const swipeThreshold = 50;
       const nearestSlide = findNearestSlide(feed, slides);
-      if (nearestSlide) {
+      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);
       }
       onDragEnd?.();
@@ -251,7 +274,6 @@ var setupDragToScroll = (config) => {
   });
   feed.addEventListener("touchmove", handleDragMove, {
     passive: false,
-    // Need to prevent default
     signal: abortSignal
   });
   feed.addEventListener("touchend", handleDragEnd, { signal: abortSignal });
@@ -265,6 +287,52 @@ var cleanupDrag = (state) => {
   }
 };
 
+// src/core/bullets.ts
+var generateBullets = ({
+  bulletsContainer,
+  slides,
+  bulletClass,
+  bulletActiveClass,
+  feedId
+}) => {
+  if (!bulletsContainer || !(bulletsContainer instanceof HTMLElement)) {
+    throw new Error("Invalid bulletsContainer: 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 (!bulletClass || typeof bulletClass !== "string") {
+    throw new Error("Invalid bulletClass: must be a non-empty string");
+  }
+  bulletsContainer.innerHTML = "";
+  bulletsContainer.setAttribute("role", "tablist");
+  bulletsContainer.setAttribute("aria-label", "Slide navigation");
+  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 bullets = visibleSlides.map(({ slide, originalIndex }, visibleIndex) => {
+    const bullet = document.createElement("button");
+    bullet.type = "button";
+    bullet.classList.add(bulletClass);
+    if (visibleIndex === 0) {
+      bullet.classList.add(bulletActiveClass);
+    }
+    bullet.setAttribute("role", "tab");
+    bullet.setAttribute("aria-selected", visibleIndex === 0 ? "true" : "false");
+    bullet.setAttribute("aria-controls", feedId);
+    bullet.setAttribute("aria-label", `Go to slide ${visibleIndex + 1}`);
+    bullet.setAttribute("data-slide-index", String(visibleIndex));
+    bulletsContainer.appendChild(bullet);
+    return bullet;
+  });
+  return bullets;
+};
+
 // src/core/marquee.ts
 var createMarqueeState = () => ({
   initialized: false,
@@ -395,6 +463,19 @@ var createSlider = (settings) => {
   if (!settings.slides?.length) {
     throw new Error("lazer-slider: slides array is required and must not be empty");
   }
+  if (!settings.feed.id) {
+    settings.feed.id = `lazer-slider-feed-${Math.random().toString(36).substr(2, 9)}`;
+  }
+  if (settings.bulletsContainer && !settings.thumbs) {
+    const bullets = generateBullets({
+      bulletsContainer: settings.bulletsContainer,
+      slides: settings.slides,
+      bulletClass: settings.bulletsClass ?? "slider-bullet",
+      bulletActiveClass: settings.bulletsActiveClass ?? "active",
+      feedId: settings.feed.id
+    });
+    settings.thumbs = bullets;
+  }
   const state = {
     currentSlideIndex: 0,
     isScrolling: false,
@@ -403,12 +484,14 @@ var createSlider = (settings) => {
     lastWidth: 0,
     updateThumbTimeout: null,
     scrollEndTimeout: null,
+    resizeTimeout: null,
     abortController: new AbortController(),
     autoplayIntervalId: null,
     autoplayPaused: false,
     marqueeAnimationId: null,
     marqueePaused: false,
-    marqueeLastTimestamp: 0
+    marqueeLastTimestamp: 0,
+    isLoopRepositioning: false
   };
   let dragState = null;
   const loopState = {
@@ -473,6 +556,7 @@ var createSlider = (settings) => {
   };
   const handleLoopReposition = (direction) => {
     if (!settings.loop || !loopState.initialized) return;
+    state.isLoopRepositioning = true;
     const realSlides = loopState.realSlides;
     const totalRealSlides = realSlides.length;
     if (direction === "next") {
@@ -488,6 +572,12 @@ var createSlider = (settings) => {
       }
       state.currentSlideIndex = totalRealSlides - 1;
     }
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        state.isLoopRepositioning = false;
+        updateControlsVisibility();
+      });
+    });
   };
   const cleanupLoopClones = () => {
     if (!loopState.initialized) return;
@@ -534,6 +624,9 @@ var createSlider = (settings) => {
     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;
@@ -696,8 +789,20 @@ var createSlider = (settings) => {
     }
   };
   const handleWindowResize = () => {
-    state.cachedFeedRect = null;
-    refresh();
+    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);
   };
   const attachEventListeners = () => {
     const { signal } = state.abortController;
@@ -741,7 +846,8 @@ var createSlider = (settings) => {
         onDragEnd: () => {
           updateCurrentSlideIndex();
           updateActiveThumb(settings.thumbs, state.currentSlideIndex);
-        }
+        },
+        dragFree: settings.dragFree
       });
     }
     if (settings.autoplay && settings.pauseOnHover !== false) {
@@ -818,6 +924,9 @@ var createSlider = (settings) => {
     if (state.scrollEndTimeout) {
       clearTimeout(state.scrollEndTimeout);
     }
+    if (state.resizeTimeout) {
+      clearTimeout(state.resizeTimeout);
+    }
     if (dragState) {
       cleanupDrag(dragState);
     }
@@ -873,6 +982,7 @@ var createSlider = (settings) => {
   easeOutCubic,
   easeOutExpo,
   easeOutQuad,
+  generateBullets,
   linear
 });
 //# sourceMappingURL=index.cjs.map