solid-slider 1.3.19 → 1.3.21

package/dist/index/components.jsx

@@ -1,4 +1,4 @@
-import { on, createContext, useContext, createSignal, createEffect, } from "solid-js";
+import { on, createContext, useContext, createSignal, createEffect, Show, createMemo, Index, onMount, } from "solid-js";
 import { access } from "@solid-primitives/utils";
 import { isServer } from "solid-js/web";
 import { createSlider } from "./primitive";
@@ -11,8 +11,8 @@ export const SliderContext = createContext(createSignal(null));
 /**
  * A helpful and simple Provider to wrap your Slider if controls such as SliderButton are used.
  *
- * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.
- * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.
+ * @param props.options - Accepts all KeenSlider options.
+ * @param props.plugins - A list of Solid Slider or Keen slider plugins.
  */
 export const SliderProvider = (props) => (<SliderContext.Provider value={createSignal(null)}>
     {props.children}
@@ -20,8 +20,8 @@ export const SliderProvider = (props) => (<SliderContext.Provider value={createS
 /**
  * Main Slider component for specifying the Slider on the page.
  *
- * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.
- * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.
+ * @param props.options - Accepts all KeenSlider options.
+ * @param props.plugins - A list of Solid Slider or Keen slider plugins.
  */
 export const Slider = (props) => {
     if (isServer)
@@ -38,10 +38,10 @@ export const Slider = (props) => {
 /**
  * Provides a helpful button with next/prev to pair with your slider.
  *
- * @param props {boolean} next - Specify if this should be a next button.
- * @param props {boolean} prev - Specify if this should be a prev button.
- * @param props {string} class - Class to override the button.
- * @param props {object} classList - List of classes to override the button.
+ * @param props.next - Specify if this should be a next button.
+ * @param props.prev - Specify if this should be a prev button.
+ * @param props.class - Class to override the button.
+ * @param props.classList - List of classes to override the button.
  */
 export const SliderButton = (props) => {
     const context = useContext(SliderContext);
@@ -55,3 +55,150 @@ export const SliderButton = (props) => {
       {props.children}
     </button>);
 };
+/**
+ * Navigation dots component for the slider.
+ * Displays a dot for each slide and highlights the current slide.
+ *
+ * @param props.class - Class to override the dots container.
+ * @param props.classList - List of classes to override the dots container.
+ * @param props.dotClass - Class to override individual dots.
+ * @param props.dotClassList - List of classes to override individual dots.
+ *
+ * @example
+ * ```tsx
+ * <SliderProvider>
+ *   <Slider>
+ *     <div class="keen-slider__slide">Slide 1</div>
+ *     <div class="keen-slider__slide">Slide 2</div>
+ *   </Slider>
+ *   <SliderDots />
+ * </SliderProvider>
+ * ```
+ */
+export const SliderDots = (props) => {
+    const context = useContext(SliderContext);
+    const [slideCount, setSlideCount] = createSignal(0);
+    const handleDotClick = (idx) => {
+        if (context == null)
+            return;
+        const [helpers] = context;
+        helpers()?.moveTo(idx);
+    };
+    // Update slide count when slider is created/updated
+    createEffect(() => {
+        if (!context)
+            return;
+        const [helpers] = context;
+        const sliderInstance = helpers()?.slider();
+        if (sliderInstance) {
+            const updateCount = () => {
+                const details = helpers()?.details();
+                setSlideCount(details?.slides?.length || 0);
+            };
+            // Set initial count
+            updateCount();
+            // Listen for slider changes
+            sliderInstance.on("created", updateCount);
+            sliderInstance.on("updated", updateCount);
+        }
+    });
+    const slides = createMemo(() => Array.from({ length: slideCount() }, (_, i) => i));
+    return (<Show when={context != null}>
+      <div class={props.class || "keen-slider-dots"} classList={props.classList}>
+        <Index each={slides()}>
+          {(idx) => {
+            const [helpers] = context;
+            const isActive = () => helpers()?.current() === idx();
+            return (<button class={props.dotClass || "keen-slider-dot"} classList={{
+                    ...props.dotClassList,
+                    active: isActive(),
+                }} onClick={() => handleDotClick(idx())} aria-label={`Go to slide ${idx() + 1}`}/>);
+        }}
+        </Index>
+      </div>
+    </Show>);
+};
+/**
+ * Thumbnail navigation component for the slider.
+ * A second Slider that synchronizes with the main slider.
+ * User provides thumbnail slides as children.
+ *
+ * @param props.options - Options for the thumbnail slider.
+ * @param props.plugins - Plugins for the thumbnail slider.
+ *
+ * @example
+ * ```tsx
+ * <SliderProvider>
+ *   <Slider options={{ loop: true }}>
+ *     <div class="keen-slider__slide">
+ *       <img src="slide1.jpg" alt="Slide 1" />
+ *     </div>
+ *     <div class="keen-slider__slide">
+ *       <img src="slide2.jpg" alt="Slide 2" />
+ *     </div>
+ *   </Slider>
+ *   <SliderThumbnails options={{ slides: { perView: 4, spacing: 10 } }}>
+ *     <div class="keen-slider__slide">
+ *       <img src="thumb1.jpg" alt="Thumbnail 1" />
+ *     </div>
+ *     <div class="keen-slider__slide">
+ *       <img src="thumb2.jpg" alt="Thumbnail 2" />
+ *     </div>
+ *   </SliderThumbnails>
+ * </SliderProvider>
+ * ```
+ */
+export const SliderThumbnails = (props) => {
+    if (isServer)
+        return <div>{props.children}</div>;
+    const mainContext = useContext(SliderContext);
+    if (!mainContext) {
+        console.warn("SliderThumbnails must be used within a SliderProvider");
+        return <div>{props.children}</div>;
+    }
+    const [mainHelpers] = mainContext;
+    // Create thumbnail slider with user options
+    const [thumbSlider, thumbHelpers] = createSlider(props.options || {}, ...(props.plugins || []));
+    // Update on children change (same as main Slider)
+    createEffect(on(() => access(props.children), () => queueMicrotask(() => thumbHelpers.update()), { defer: true }));
+    // Sync thumbnail slider with main slider
+    onMount(() => {
+        // Wait for next tick to ensure both sliders are mounted
+        queueMicrotask(() => {
+            const mainSliderInstance = mainHelpers()?.slider();
+            const thumbSliderInstance = thumbHelpers.slider();
+            if (mainSliderInstance && thumbSliderInstance) {
+                // Function to update active thumbnail
+                const activeClassName = props.activeClass || "active";
+                const updateActiveThumbnail = () => {
+                    const mainCurrent = mainHelpers()?.current();
+                    if (mainCurrent !== undefined) {
+                        // Remove active class from all thumbnails
+                        thumbSliderInstance.slides.forEach((slide) => {
+                            slide.classList.remove(activeClassName);
+                        });
+                        // Add active class to current thumbnail
+                        if (thumbSliderInstance.slides[mainCurrent]) {
+                            thumbSliderInstance.slides[mainCurrent].classList.add(activeClassName);
+                        }
+                        // Move thumbnail slider to show active thumbnail
+                        thumbHelpers.moveTo(mainCurrent);
+                    }
+                };
+                // Listen to main slider changes
+                mainSliderInstance.on("slideChanged", updateActiveThumbnail);
+                // Set initial active state
+                updateActiveThumbnail();
+                // Add click handlers to thumbnails
+                thumbSliderInstance.slides.forEach((slide, idx) => {
+                    slide.addEventListener("click", () => {
+                        mainHelpers()?.moveTo(idx);
+                    });
+                });
+            }
+        });
+    });
+    // Prevent tree-shaking
+    thumbSlider;
+    return <div use:thumbSlider>{props.children}</div>;
+};