solid-slider 1.3.18 → 1.3.20

package/README.md

@@ -71,7 +71,7 @@ const MyComponent = () => {
       </Slider>
       <SliderButton prev>Previous</SliderButton>
       <SliderButton next>Next</SliderButton>
-    <SliderProvider>
+    </SliderProvider>
   );
 };
 ```
@@ -212,6 +212,145 @@ const [slider] = createSlider(
 );
 ```
 
+## Helper Components
+
+### Navigation Dots
+
+You can add navigation dots to your slider using the `SliderDots` component. The component automatically generates clickable dots for each slide and highlights the active slide.
+
+```tsx
+import { SliderProvider, Slider, SliderDots } from "solid-slider";
+
+const MyComponent = () => {
+  return (
+    <SliderProvider>
+      <Slider options={{ loop: true }}>
+        <div>Slide 1</div>
+        <div>Slide 2</div>
+        <div>Slide 3</div>
+      </Slider>
+      <SliderDots />
+    </SliderProvider>
+  );
+};
+```
+
+**Customization:**
+
+You can customize the dots styling using `class`, `classList`, `dotClass`, and `dotClassList` props:
+
+```tsx
+<SliderDots
+  class="my-dots-container"
+  dotClass="my-dot"
+  dotClassList={{ "my-active-dot": true }}
+/>
+```
+
+**Props:**
+- `class` - CSS class for the dots container
+- `classList` - Conditional classes for the dots container
+- `dotClass` - CSS class for individual dot buttons
+- `dotClassList` - Conditional classes for individual dot buttons
+
+**Default Classes:**
+- Container: `.slider-dots`
+- Individual dots: `.slider-dot`
+- Active dot: `.slider-dot.active`
+
+**Styling Example:**
+
+```css
+.slider-dots {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 20px;
+}
+
+.slider-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #ddd;
+  border: none;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.slider-dot:hover {
+  background: #aaa;
+}
+
+.slider-dot.active {
+  background: #333;
+}
+```
+
+### Thumbnail Navigation
+
+Create a synchronized thumbnail navigation using the `SliderThumbnails` component. This creates a second slider that stays in sync with the main slider, allowing users to click thumbnails to navigate.
+
+```tsx
+import { SliderProvider, Slider, SliderThumbnails } from "solid-slider";
+import { For } from "solid-js";
+
+const MyComponent = () => {
+  const images = [
+    { full: "/slide1.jpg", thumb: "/thumb1.jpg" },
+    { full: "/slide2.jpg", thumb: "/thumb2.jpg" },
+    { full: "/slide3.jpg", thumb: "/thumb3.jpg" },
+  ];
+
+  return (
+    <SliderProvider>
+      <Slider options={{ loop: true }}>
+        <For each={images}>
+          {(img) => (
+            <div>
+              <img src={img.full} alt="Slide" />
+            </div>
+          )}
+        </For>
+      </Slider>
+      <SliderThumbnails options={{ slides: { perView: 4, spacing: 10 } }}>
+        <For each={images}>
+          {(img) => (
+            <div class="thumbnail-slide">
+              <img src={img.thumb} alt="Thumbnail" />
+            </div>
+          )}
+        </For>
+      </SliderThumbnails>
+    </SliderProvider>
+  );
+};
+```
+
+**Important:** When using dynamic content with `SliderThumbnails`, use SolidJS's `<For>` component instead of `.map()` to ensure proper reactivity.
+
+**Props:**
+- `options` - KeenSlider options for the thumbnail slider (e.g., slides per view, spacing)
+- `plugins` - Array of KeenSlider plugins to apply to the thumbnail slider
+- `activeClass` - Custom CSS class name for the active thumbnail (default: `"active"`)
+
+**Features:**
+- Automatically syncs with the main slider
+- Adds `active` class to the current thumbnail
+- Click any thumbnail to navigate to that slide
+- Supports all KeenSlider options for customization
+
+**Styling Example:**
+
+```css
+.thumbnail-slide:hover {
+  opacity: 0.8;
+}
+.thumbnail-slide.active {
+  opacity: 1;
+}
+```
+
 ## SolidStart & Server-Side Rendering
 
 So you want to use Solid Slider with [SolidStart](https://start.solidjs.com/). No problem but be mindful of how you use it and how server-side rendering impacts the experience. Remember that by default SolidStart enables SSR meaning that your pages are initially rendered on the server. The server has no context of the dimensions of your browser so it cannot calculate how the slider will appear once it's rendered in the browser.
@@ -232,8 +371,8 @@ Thie library exports it's own CSS which is the basic Keen-Slider implementation
 
 - [x] Create [adaptiveHeight](https://codesandbox.io/s/github/rcbyr/keen-slider-sandboxes/tree/v6/misc/adaptive-height/react?file=/src/App.js:191-403) plugin
 - [x] Create [adaptiveWidth](https://github.com/joeygrable94/solid-slider) plugin
-- [ ] Add Dots components (to display a row of dots below the slider)
-- [ ] Add slider thumbnail navigation
+- [x] Add Dots components (to display a row of dots below the slider)
+- [x] Add slider thumbnail navigation
 - [ ] Add slider loader
 - [ ] Build [timepicker](https://keen-slider.io/examples#timepicker) component
 - [ ] Create [Scroll Wheel](https://keen-slider.io/examples#scroll-wheel-controls) component
@@ -248,7 +387,7 @@ Thie library exports it's own CSS which is the basic Keen-Slider implementation
 - 1.2.9 - Updated timer primitive and patched issue with current slide setting from initial options.
 - 1.3.1 - Introduced Slider, SliderProvider and SliderButton for ease.
 - 1.3.2 - Patched issue with initial slide not setting current signal.
-- 1.3.5 - Updated to latest SolidJS version.
+- 1.3.5 - Updated to latest Solid version.
 - 1.3.7 - Fixed TS issues updated to latest KeenSlider.
 - 1.3.8 - Updated to Solid 1.5
 - 1.3.9 - Fixed Keen URLs, type issues and truthy error with autoplay (thanks [ishanAhuja](https://www.github.com/ishanAhuja) and [ahhshm](https://www.github.com/ahhshm))
@@ -260,6 +399,8 @@ Thie library exports it's own CSS which is the basic Keen-Slider implementation
 - 1.3.16 - Updated dependencies and move Solid from dependency to peer
 - 1.3.17 - Added typs definition to exports (thanks [ChristophP](https://github.com/ChristophP))
 - 1.3.18 - Adjusted documentation and minor source cleanup
+- 1.3.19 - Attempt to fix export paths
+- 1.3.20 - Package maintenance (bumping versions) and added new dot and thumbnail navigation components
 
 ## Keen Options API
 

package/dist/adaptiveHeight/index.common.js

@@ -8,8 +8,8 @@
  * const [create] = createSlider({}, [adaptiveHeight]);
  * ```
  */
-var adaptiveHeight = function adaptiveHeight() {
-  return function (slider) {
+const adaptiveHeight = () => {
+  return slider => {
     function updateHeight() {
       slider.container.style.height = slider.slides[slider.track.details.rel].offsetHeight + "px";
     }

package/dist/adaptiveHeight/index.common.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.common.js","sources":["../../src/plugins/adaptiveHeight.tsx"],"sourcesContent":["import { KeenSliderInstance } from \"keen-slider\";\n\n/**\n * Adaptive height is a plugin that adjusts the height of the slider to the content on change.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [adaptiveHeight]);\n * ```\n */\nexport const adaptiveHeight = () => {\n  return (slider: KeenSliderInstance) => {\n    function updateHeight() {\n      slider.container.style.height =\n        slider.slides[slider.track.details.rel].offsetHeight + \"px\";\n    }\n    slider.on(\"created\", updateHeight);\n    slider.on(\"slideChanged\", updateHeight);\n  };\n};\n"],"names":["adaptiveHeight","slider","updateHeight","container","style","height","slides","track","details","rel","offsetHeight","on"],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACaA,IAAAA,cAAc,GAAG,SAAjBA,cAAc,GAAS;EAClC,OAAO,UAACC,MAA0B,EAAK;AACrC,IAAA,SAASC,YAAY,GAAG;MACtBD,MAAM,CAACE,SAAS,CAACC,KAAK,CAACC,MAAM,GAC3BJ,MAAM,CAACK,MAAM,CAACL,MAAM,CAACM,KAAK,CAACC,OAAO,CAACC,GAAG,CAAC,CAACC,YAAY,GAAG,IAAI,CAAA;AAC/D,KAAA;AACAT,IAAAA,MAAM,CAACU,EAAE,CAAC,SAAS,EAAET,YAAY,CAAC,CAAA;AAClCD,IAAAA,MAAM,CAACU,EAAE,CAAC,cAAc,EAAET,YAAY,CAAC,CAAA;GACxC,CAAA;AACH;;;;"}
+{"version":3,"file":"index.common.js","sources":["../../src/plugins/adaptiveHeight.tsx"],"sourcesContent":["import { KeenSliderInstance } from \"keen-slider\";\n\n/**\n * Adaptive height is a plugin that adjusts the height of the slider to the content on change.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [adaptiveHeight]);\n * ```\n */\nexport const adaptiveHeight = () => {\n  return (slider: KeenSliderInstance) => {\n    function updateHeight() {\n      slider.container.style.height =\n        slider.slides[slider.track.details.rel].offsetHeight + \"px\";\n    }\n    slider.on(\"created\", updateHeight);\n    slider.on(\"slideChanged\", updateHeight);\n  };\n};\n"],"names":["adaptiveHeight","slider","updateHeight","container","style","height","slides","track","details","rel","offsetHeight","on"],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,cAAc,GAAGA,MAAM;AAClC,EAAA,OAAQC,MAA0B,IAAK;IACrC,SAASC,YAAYA,GAAG;MACtBD,MAAM,CAACE,SAAS,CAACC,KAAK,CAACC,MAAM,GAC3BJ,MAAM,CAACK,MAAM,CAACL,MAAM,CAACM,KAAK,CAACC,OAAO,CAACC,GAAG,CAAC,CAACC,YAAY,GAAG,IAAI;AAC/D,IAAA;AACAT,IAAAA,MAAM,CAACU,EAAE,CAAC,SAAS,EAAET,YAAY,CAAC;AAClCD,IAAAA,MAAM,CAACU,EAAE,CAAC,cAAc,EAAET,YAAY,CAAC;EACzC,CAAC;AACH;;;;"}

package/dist/adaptiveHeight/index.module.js

@@ -6,8 +6,8 @@
  * const [create] = createSlider({}, [adaptiveHeight]);
  * ```
  */
-var adaptiveHeight = function adaptiveHeight() {
-  return function (slider) {
+const adaptiveHeight = () => {
+  return slider => {
     function updateHeight() {
       slider.container.style.height = slider.slides[slider.track.details.rel].offsetHeight + "px";
     }

package/dist/adaptiveHeight/index.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.js","sources":["../../src/plugins/adaptiveHeight.tsx"],"sourcesContent":["import { KeenSliderInstance } from \"keen-slider\";\n\n/**\n * Adaptive height is a plugin that adjusts the height of the slider to the content on change.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [adaptiveHeight]);\n * ```\n */\nexport const adaptiveHeight = () => {\n  return (slider: KeenSliderInstance) => {\n    function updateHeight() {\n      slider.container.style.height =\n        slider.slides[slider.track.details.rel].offsetHeight + \"px\";\n    }\n    slider.on(\"created\", updateHeight);\n    slider.on(\"slideChanged\", updateHeight);\n  };\n};\n"],"names":["adaptiveHeight","slider","updateHeight","container","style","height","slides","track","details","rel","offsetHeight","on"],"mappings":"AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACaA,IAAAA,cAAc,GAAG,SAAjBA,cAAc,GAAS;EAClC,OAAO,UAACC,MAA0B,EAAK;AACrC,IAAA,SAASC,YAAY,GAAG;MACtBD,MAAM,CAACE,SAAS,CAACC,KAAK,CAACC,MAAM,GAC3BJ,MAAM,CAACK,MAAM,CAACL,MAAM,CAACM,KAAK,CAACC,OAAO,CAACC,GAAG,CAAC,CAACC,YAAY,GAAG,IAAI,CAAA;AAC/D,KAAA;AACAT,IAAAA,MAAM,CAACU,EAAE,CAAC,SAAS,EAAET,YAAY,CAAC,CAAA;AAClCD,IAAAA,MAAM,CAACU,EAAE,CAAC,cAAc,EAAET,YAAY,CAAC,CAAA;GACxC,CAAA;AACH;;;;"}
+{"version":3,"file":"index.module.js","sources":["../../src/plugins/adaptiveHeight.tsx"],"sourcesContent":["import { KeenSliderInstance } from \"keen-slider\";\n\n/**\n * Adaptive height is a plugin that adjusts the height of the slider to the content on change.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [adaptiveHeight]);\n * ```\n */\nexport const adaptiveHeight = () => {\n  return (slider: KeenSliderInstance) => {\n    function updateHeight() {\n      slider.container.style.height =\n        slider.slides[slider.track.details.rel].offsetHeight + \"px\";\n    }\n    slider.on(\"created\", updateHeight);\n    slider.on(\"slideChanged\", updateHeight);\n  };\n};\n"],"names":["adaptiveHeight","slider","updateHeight","container","style","height","slides","track","details","rel","offsetHeight","on"],"mappings":"AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,cAAc,GAAGA,MAAM;AAClC,EAAA,OAAQC,MAA0B,IAAK;IACrC,SAASC,YAAYA,GAAG;MACtBD,MAAM,CAACE,SAAS,CAACC,KAAK,CAACC,MAAM,GAC3BJ,MAAM,CAACK,MAAM,CAACL,MAAM,CAACM,KAAK,CAACC,OAAO,CAACC,GAAG,CAAC,CAACC,YAAY,GAAG,IAAI;AAC/D,IAAA;AACAT,IAAAA,MAAM,CAACU,EAAE,CAAC,SAAS,EAAET,YAAY,CAAC;AAClCD,IAAAA,MAAM,CAACU,EAAE,CAAC,cAAc,EAAET,YAAY,CAAC;EACzC,CAAC;AACH;;;;"}

package/dist/adaptiveWidth/index.common.js

@@ -8,8 +8,8 @@
  * const [create] = createSlider({}, [adaptiveWidth]);
  * ```
  */
-var adaptiveWidth = function adaptiveWidth() {
-  return function (slider) {
+const adaptiveWidth = () => {
+  return slider => {
     function updateWidth() {
       slider.container.style.width = slider.slides[slider.track.details.rel].offsetWidth + "px";
     }

package/dist/adaptiveWidth/index.common.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.common.js","sources":["../../src/plugins/adaptiveWidth.tsx"],"sourcesContent":["import { KeenSliderInstance } from \"keen-slider\";\n\n/**\n * Adaptive width is a plugin that adjusts the width of the slider to the content on change.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [adaptiveWidth]);\n * ```\n */\nexport const adaptiveWidth = () => {\n  return (slider: KeenSliderInstance) => {\n    function updateWidth() {\n      slider.container.style.width =\n        slider.slides[slider.track.details.rel].offsetWidth + \"px\";\n    }\n    slider.on(\"created\", updateWidth);\n    slider.on(\"slideChanged\", updateWidth);\n  };\n};\n"],"names":["adaptiveWidth","slider","updateWidth","container","style","width","slides","track","details","rel","offsetWidth","on"],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACaA,IAAAA,aAAa,GAAG,SAAhBA,aAAa,GAAS;EACjC,OAAO,UAACC,MAA0B,EAAK;AACrC,IAAA,SAASC,WAAW,GAAG;MACrBD,MAAM,CAACE,SAAS,CAACC,KAAK,CAACC,KAAK,GAC1BJ,MAAM,CAACK,MAAM,CAACL,MAAM,CAACM,KAAK,CAACC,OAAO,CAACC,GAAG,CAAC,CAACC,WAAW,GAAG,IAAI,CAAA;AAC9D,KAAA;AACAT,IAAAA,MAAM,CAACU,EAAE,CAAC,SAAS,EAAET,WAAW,CAAC,CAAA;AACjCD,IAAAA,MAAM,CAACU,EAAE,CAAC,cAAc,EAAET,WAAW,CAAC,CAAA;GACvC,CAAA;AACH;;;;"}
+{"version":3,"file":"index.common.js","sources":["../../src/plugins/adaptiveWidth.tsx"],"sourcesContent":["import { KeenSliderInstance } from \"keen-slider\";\n\n/**\n * Adaptive width is a plugin that adjusts the width of the slider to the content on change.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [adaptiveWidth]);\n * ```\n */\nexport const adaptiveWidth = () => {\n  return (slider: KeenSliderInstance) => {\n    function updateWidth() {\n      slider.container.style.width =\n        slider.slides[slider.track.details.rel].offsetWidth + \"px\";\n    }\n    slider.on(\"created\", updateWidth);\n    slider.on(\"slideChanged\", updateWidth);\n  };\n};\n"],"names":["adaptiveWidth","slider","updateWidth","container","style","width","slides","track","details","rel","offsetWidth","on"],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,aAAa,GAAGA,MAAM;AACjC,EAAA,OAAQC,MAA0B,IAAK;IACrC,SAASC,WAAWA,GAAG;MACrBD,MAAM,CAACE,SAAS,CAACC,KAAK,CAACC,KAAK,GAC1BJ,MAAM,CAACK,MAAM,CAACL,MAAM,CAACM,KAAK,CAACC,OAAO,CAACC,GAAG,CAAC,CAACC,WAAW,GAAG,IAAI;AAC9D,IAAA;AACAT,IAAAA,MAAM,CAACU,EAAE,CAAC,SAAS,EAAET,WAAW,CAAC;AACjCD,IAAAA,MAAM,CAACU,EAAE,CAAC,cAAc,EAAET,WAAW,CAAC;EACxC,CAAC;AACH;;;;"}

package/dist/adaptiveWidth/index.module.js

@@ -6,8 +6,8 @@
  * const [create] = createSlider({}, [adaptiveWidth]);
  * ```
  */
-var adaptiveWidth = function adaptiveWidth() {
-  return function (slider) {
+const adaptiveWidth = () => {
+  return slider => {
     function updateWidth() {
       slider.container.style.width = slider.slides[slider.track.details.rel].offsetWidth + "px";
     }

package/dist/adaptiveWidth/index.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.js","sources":["../../src/plugins/adaptiveWidth.tsx"],"sourcesContent":["import { KeenSliderInstance } from \"keen-slider\";\n\n/**\n * Adaptive width is a plugin that adjusts the width of the slider to the content on change.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [adaptiveWidth]);\n * ```\n */\nexport const adaptiveWidth = () => {\n  return (slider: KeenSliderInstance) => {\n    function updateWidth() {\n      slider.container.style.width =\n        slider.slides[slider.track.details.rel].offsetWidth + \"px\";\n    }\n    slider.on(\"created\", updateWidth);\n    slider.on(\"slideChanged\", updateWidth);\n  };\n};\n"],"names":["adaptiveWidth","slider","updateWidth","container","style","width","slides","track","details","rel","offsetWidth","on"],"mappings":"AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACaA,IAAAA,aAAa,GAAG,SAAhBA,aAAa,GAAS;EACjC,OAAO,UAACC,MAA0B,EAAK;AACrC,IAAA,SAASC,WAAW,GAAG;MACrBD,MAAM,CAACE,SAAS,CAACC,KAAK,CAACC,KAAK,GAC1BJ,MAAM,CAACK,MAAM,CAACL,MAAM,CAACM,KAAK,CAACC,OAAO,CAACC,GAAG,CAAC,CAACC,WAAW,GAAG,IAAI,CAAA;AAC9D,KAAA;AACAT,IAAAA,MAAM,CAACU,EAAE,CAAC,SAAS,EAAET,WAAW,CAAC,CAAA;AACjCD,IAAAA,MAAM,CAACU,EAAE,CAAC,cAAc,EAAET,WAAW,CAAC,CAAA;GACvC,CAAA;AACH;;;;"}
+{"version":3,"file":"index.module.js","sources":["../../src/plugins/adaptiveWidth.tsx"],"sourcesContent":["import { KeenSliderInstance } from \"keen-slider\";\n\n/**\n * Adaptive width is a plugin that adjusts the width of the slider to the content on change.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [adaptiveWidth]);\n * ```\n */\nexport const adaptiveWidth = () => {\n  return (slider: KeenSliderInstance) => {\n    function updateWidth() {\n      slider.container.style.width =\n        slider.slides[slider.track.details.rel].offsetWidth + \"px\";\n    }\n    slider.on(\"created\", updateWidth);\n    slider.on(\"slideChanged\", updateWidth);\n  };\n};\n"],"names":["adaptiveWidth","slider","updateWidth","container","style","width","slides","track","details","rel","offsetWidth","on"],"mappings":"AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,aAAa,GAAGA,MAAM;AACjC,EAAA,OAAQC,MAA0B,IAAK;IACrC,SAASC,WAAWA,GAAG;MACrBD,MAAM,CAACE,SAAS,CAACC,KAAK,CAACC,KAAK,GAC1BJ,MAAM,CAACK,MAAM,CAACL,MAAM,CAACM,KAAK,CAACC,OAAO,CAACC,GAAG,CAAC,CAACC,WAAW,GAAG,IAAI;AAC9D,IAAA;AACAT,IAAAA,MAAM,CAACU,EAAE,CAAC,SAAS,EAAET,WAAW,CAAC;AACjCD,IAAAA,MAAM,CAACU,EAAE,CAAC,cAAc,EAAET,WAAW,CAAC;EACxC,CAAC;AACH;;;;"}

package/dist/autoplay/index.common.js

@@ -19,27 +19,17 @@ var solidJs = require('solid-js');
  * const [create] = createSlider({}, [autoplay]);
  * ```
  */
-var autoplay = function autoplay() {
-  var interval = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1000;
-  var options = arguments.length > 1 ? arguments[1] : undefined;
-  return function (slider) {
-    var dispose;
-    var start = function start() {
-      dispose = timer.makeTimer(function () {
-        return slider.moveToIdx(slider.track.details.position + 1, true, options.animation);
-      }, interval, setInterval);
+const autoplay = (interval = 1000, options) => {
+  return slider => {
+    let dispose;
+    const start = () => {
+      dispose = timer.makeTimer(() => slider.moveToIdx(slider.track.details.position + 1, true, options.animation), interval, setInterval);
     };
     // Pause the slider on drag
     if (options.pauseOnDrag !== false) {
-      slider.on("dragStarted", function () {
-        var _dispose;
-        return (_dispose = dispose) === null || _dispose === void 0 ? void 0 : _dispose();
-      });
+      slider.on("dragStarted", () => dispose?.());
     }
-    solidJs.createEffect(function () {
-      var _dispose2;
-      return !options.pause || options.pause() === false ? start() : (_dispose2 = dispose) === null || _dispose2 === void 0 ? void 0 : _dispose2();
-    });
+    solidJs.createEffect(() => !options.pause || options.pause() === false ? start() : dispose?.());
   };
 };
 

package/dist/autoplay/index.common.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.common.js","sources":["../../src/plugins/autoplay.tsx"],"sourcesContent":["import { makeTimer } from \"@solid-primitives/timer\";\nimport { KeenSliderInstance } from \"keen-slider\";\nimport { Accessor, createEffect } from \"solid-js\";\n\n/**\n * Provides an autoplay plugin.\n *\n * @param {number} interval Interval in milliseconds for switching slides\n * @param {object} options Options to customize the autoplay\n * @param {Function} options.pause A pause signal to control the autoplay\n * @param {boolean} options.pauseOnDrag Denotes of the autoplay should pause on drag.\n * @param {object} options.animation Allows for control of duration and easing.\n * @param {number} options.duration Duration for transitioning the slide.\n * @param {number} options.easing Easing function for the transition animation.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [autoplay]);\n * ```\n */\nexport const autoplay = (\n  interval: number = 1000,\n  options: {\n    pause?: Accessor<boolean>;\n    pauseOnDrag?: boolean;\n    animation?: {\n      duration?: number;\n      easing?: (t: number) => number;\n    };\n  },\n) => {\n  return (slider: KeenSliderInstance) => {\n    let dispose: Function;\n    const start = () => {\n      dispose = makeTimer(\n        () =>\n          slider.moveToIdx(\n            slider.track.details.position + 1,\n            true,\n            options.animation,\n          ),\n        interval,\n        setInterval,\n      );\n    };\n    // Pause the slider on drag\n    if (options.pauseOnDrag !== false) {\n      slider.on(\"dragStarted\", () => dispose?.());\n    }\n    createEffect(() =>\n      !options.pause || options.pause() === false ? start() : dispose?.(),\n    );\n  };\n};\n"],"names":["autoplay","interval","options","slider","dispose","start","makeTimer","moveToIdx","track","details","position","animation","setInterval","pauseOnDrag","on","createEffect","pause"],"mappings":";;;;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACaA,IAAAA,QAAQ,GAAG,SAAXA,QAAQ,GAUhB;EAAA,IATHC,QAAgB,uEAAG,IAAI,CAAA;AAAA,EAAA,IACvBC,OAOC,GAAA,SAAA,CAAA,MAAA,GAAA,CAAA,GAAA,SAAA,CAAA,CAAA,CAAA,GAAA,SAAA,CAAA;EAED,OAAO,UAACC,MAA0B,EAAK;AACrC,IAAA,IAAIC,OAAiB,CAAA;AACrB,IAAA,IAAMC,KAAK,GAAG,SAARA,KAAK,GAAS;MAClBD,OAAO,GAAGE,eAAS,CACjB,YAAA;AAAA,QAAA,OACEH,MAAM,CAACI,SAAS,CACdJ,MAAM,CAACK,KAAK,CAACC,OAAO,CAACC,QAAQ,GAAG,CAAC,EACjC,IAAI,EACJR,OAAO,CAACS,SAAS,CAClB,CAAA;OACHV,EAAAA,QAAQ,EACRW,WAAW,CACZ,CAAA;KACF,CAAA;AACD;AACA,IAAA,IAAIV,OAAO,CAACW,WAAW,KAAK,KAAK,EAAE;AACjCV,MAAAA,MAAM,CAACW,EAAE,CAAC,aAAa,EAAE,YAAA;AAAA,QAAA,IAAA,QAAA,CAAA;QAAA,OAAMV,CAAAA,QAAAA,GAAAA,OAAO,6CAAP,QAAW,EAAA,CAAA;OAAC,CAAA,CAAA;AAC7C,KAAA;AACAW,IAAAA,oBAAY,CAAC,YAAA;AAAA,MAAA,IAAA,SAAA,CAAA;AAAA,MAAA,OACX,CAACb,OAAO,CAACc,KAAK,IAAId,OAAO,CAACc,KAAK,EAAE,KAAK,KAAK,GAAGX,KAAK,EAAE,GAAGD,CAAAA,SAAAA,GAAAA,OAAO,8CAAP,SAAW,EAAA,CAAA;KACpE,CAAA,CAAA;GACF,CAAA;AACH;;;;"}
+{"version":3,"file":"index.common.js","sources":["../../src/plugins/autoplay.tsx"],"sourcesContent":["import { makeTimer } from \"@solid-primitives/timer\";\nimport { KeenSliderInstance } from \"keen-slider\";\nimport { Accessor, createEffect } from \"solid-js\";\n\n/**\n * Provides an autoplay plugin.\n *\n * @param {number} interval Interval in milliseconds for switching slides\n * @param {object} options Options to customize the autoplay\n * @param {Function} options.pause A pause signal to control the autoplay\n * @param {boolean} options.pauseOnDrag Denotes of the autoplay should pause on drag.\n * @param {object} options.animation Allows for control of duration and easing.\n * @param {number} options.duration Duration for transitioning the slide.\n * @param {number} options.easing Easing function for the transition animation.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [autoplay]);\n * ```\n */\nexport const autoplay = (\n  interval: number = 1000,\n  options: {\n    pause?: Accessor<boolean>;\n    pauseOnDrag?: boolean;\n    animation?: {\n      duration?: number;\n      easing?: (t: number) => number;\n    };\n  },\n) => {\n  return (slider: KeenSliderInstance) => {\n    let dispose: Function;\n    const start = () => {\n      dispose = makeTimer(\n        () =>\n          slider.moveToIdx(\n            slider.track.details.position + 1,\n            true,\n            options.animation,\n          ),\n        interval,\n        setInterval,\n      );\n    };\n    // Pause the slider on drag\n    if (options.pauseOnDrag !== false) {\n      slider.on(\"dragStarted\", () => dispose?.());\n    }\n    createEffect(() =>\n      !options.pause || options.pause() === false ? start() : dispose?.(),\n    );\n  };\n};\n"],"names":["autoplay","interval","options","slider","dispose","start","makeTimer","moveToIdx","track","details","position","animation","setInterval","pauseOnDrag","on","createEffect","pause"],"mappings":";;;;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,QAAQ,GAAGA,CACtBC,QAAgB,GAAG,IAAI,EACvBC,OAOC,KACE;AACH,EAAA,OAAQC,MAA0B,IAAK;AACrC,IAAA,IAAIC,OAAiB;IACrB,MAAMC,KAAK,GAAGA,MAAM;AAClBD,MAAAA,OAAO,GAAGE,eAAS,CACjB,MACEH,MAAM,CAACI,SAAS,CACdJ,MAAM,CAACK,KAAK,CAACC,OAAO,CAACC,QAAQ,GAAG,CAAC,EACjC,IAAI,EACJR,OAAO,CAACS,SACV,CAAC,EACHV,QAAQ,EACRW,WACF,CAAC;IACH,CAAC;AACD;AACA,IAAA,IAAIV,OAAO,CAACW,WAAW,KAAK,KAAK,EAAE;MACjCV,MAAM,CAACW,EAAE,CAAC,aAAa,EAAE,MAAMV,OAAO,IAAI,CAAC;AAC7C,IAAA;IACAW,oBAAY,CAAC,MACX,CAACb,OAAO,CAACc,KAAK,IAAId,OAAO,CAACc,KAAK,EAAE,KAAK,KAAK,GAAGX,KAAK,EAAE,GAAGD,OAAO,IACjE,CAAC;EACH,CAAC;AACH;;;;"}

package/dist/autoplay/index.module.js

@@ -17,27 +17,17 @@ import { createEffect } from 'solid-js';
  * const [create] = createSlider({}, [autoplay]);
  * ```
  */
-var autoplay = function autoplay() {
-  var interval = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1000;
-  var options = arguments.length > 1 ? arguments[1] : undefined;
-  return function (slider) {
-    var dispose;
-    var start = function start() {
-      dispose = makeTimer(function () {
-        return slider.moveToIdx(slider.track.details.position + 1, true, options.animation);
-      }, interval, setInterval);
+const autoplay = (interval = 1000, options) => {
+  return slider => {
+    let dispose;
+    const start = () => {
+      dispose = makeTimer(() => slider.moveToIdx(slider.track.details.position + 1, true, options.animation), interval, setInterval);
     };
     // Pause the slider on drag
     if (options.pauseOnDrag !== false) {
-      slider.on("dragStarted", function () {
-        var _dispose;
-        return (_dispose = dispose) === null || _dispose === void 0 ? void 0 : _dispose();
-      });
+      slider.on("dragStarted", () => dispose?.());
     }
-    createEffect(function () {
-      var _dispose2;
-      return !options.pause || options.pause() === false ? start() : (_dispose2 = dispose) === null || _dispose2 === void 0 ? void 0 : _dispose2();
-    });
+    createEffect(() => !options.pause || options.pause() === false ? start() : dispose?.());
   };
 };
 

package/dist/autoplay/index.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.js","sources":["../../src/plugins/autoplay.tsx"],"sourcesContent":["import { makeTimer } from \"@solid-primitives/timer\";\nimport { KeenSliderInstance } from \"keen-slider\";\nimport { Accessor, createEffect } from \"solid-js\";\n\n/**\n * Provides an autoplay plugin.\n *\n * @param {number} interval Interval in milliseconds for switching slides\n * @param {object} options Options to customize the autoplay\n * @param {Function} options.pause A pause signal to control the autoplay\n * @param {boolean} options.pauseOnDrag Denotes of the autoplay should pause on drag.\n * @param {object} options.animation Allows for control of duration and easing.\n * @param {number} options.duration Duration for transitioning the slide.\n * @param {number} options.easing Easing function for the transition animation.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [autoplay]);\n * ```\n */\nexport const autoplay = (\n  interval: number = 1000,\n  options: {\n    pause?: Accessor<boolean>;\n    pauseOnDrag?: boolean;\n    animation?: {\n      duration?: number;\n      easing?: (t: number) => number;\n    };\n  },\n) => {\n  return (slider: KeenSliderInstance) => {\n    let dispose: Function;\n    const start = () => {\n      dispose = makeTimer(\n        () =>\n          slider.moveToIdx(\n            slider.track.details.position + 1,\n            true,\n            options.animation,\n          ),\n        interval,\n        setInterval,\n      );\n    };\n    // Pause the slider on drag\n    if (options.pauseOnDrag !== false) {\n      slider.on(\"dragStarted\", () => dispose?.());\n    }\n    createEffect(() =>\n      !options.pause || options.pause() === false ? start() : dispose?.(),\n    );\n  };\n};\n"],"names":["autoplay","interval","options","slider","dispose","start","makeTimer","moveToIdx","track","details","position","animation","setInterval","pauseOnDrag","on","createEffect","pause"],"mappings":";;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACaA,IAAAA,QAAQ,GAAG,SAAXA,QAAQ,GAUhB;EAAA,IATHC,QAAgB,uEAAG,IAAI,CAAA;AAAA,EAAA,IACvBC,OAOC,GAAA,SAAA,CAAA,MAAA,GAAA,CAAA,GAAA,SAAA,CAAA,CAAA,CAAA,GAAA,SAAA,CAAA;EAED,OAAO,UAACC,MAA0B,EAAK;AACrC,IAAA,IAAIC,OAAiB,CAAA;AACrB,IAAA,IAAMC,KAAK,GAAG,SAARA,KAAK,GAAS;MAClBD,OAAO,GAAGE,SAAS,CACjB,YAAA;AAAA,QAAA,OACEH,MAAM,CAACI,SAAS,CACdJ,MAAM,CAACK,KAAK,CAACC,OAAO,CAACC,QAAQ,GAAG,CAAC,EACjC,IAAI,EACJR,OAAO,CAACS,SAAS,CAClB,CAAA;OACHV,EAAAA,QAAQ,EACRW,WAAW,CACZ,CAAA;KACF,CAAA;AACD;AACA,IAAA,IAAIV,OAAO,CAACW,WAAW,KAAK,KAAK,EAAE;AACjCV,MAAAA,MAAM,CAACW,EAAE,CAAC,aAAa,EAAE,YAAA;AAAA,QAAA,IAAA,QAAA,CAAA;QAAA,OAAMV,CAAAA,QAAAA,GAAAA,OAAO,6CAAP,QAAW,EAAA,CAAA;OAAC,CAAA,CAAA;AAC7C,KAAA;AACAW,IAAAA,YAAY,CAAC,YAAA;AAAA,MAAA,IAAA,SAAA,CAAA;AAAA,MAAA,OACX,CAACb,OAAO,CAACc,KAAK,IAAId,OAAO,CAACc,KAAK,EAAE,KAAK,KAAK,GAAGX,KAAK,EAAE,GAAGD,CAAAA,SAAAA,GAAAA,OAAO,8CAAP,SAAW,EAAA,CAAA;KACpE,CAAA,CAAA;GACF,CAAA;AACH;;;;"}
+{"version":3,"file":"index.module.js","sources":["../../src/plugins/autoplay.tsx"],"sourcesContent":["import { makeTimer } from \"@solid-primitives/timer\";\nimport { KeenSliderInstance } from \"keen-slider\";\nimport { Accessor, createEffect } from \"solid-js\";\n\n/**\n * Provides an autoplay plugin.\n *\n * @param {number} interval Interval in milliseconds for switching slides\n * @param {object} options Options to customize the autoplay\n * @param {Function} options.pause A pause signal to control the autoplay\n * @param {boolean} options.pauseOnDrag Denotes of the autoplay should pause on drag.\n * @param {object} options.animation Allows for control of duration and easing.\n * @param {number} options.duration Duration for transitioning the slide.\n * @param {number} options.easing Easing function for the transition animation.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [autoplay]);\n * ```\n */\nexport const autoplay = (\n  interval: number = 1000,\n  options: {\n    pause?: Accessor<boolean>;\n    pauseOnDrag?: boolean;\n    animation?: {\n      duration?: number;\n      easing?: (t: number) => number;\n    };\n  },\n) => {\n  return (slider: KeenSliderInstance) => {\n    let dispose: Function;\n    const start = () => {\n      dispose = makeTimer(\n        () =>\n          slider.moveToIdx(\n            slider.track.details.position + 1,\n            true,\n            options.animation,\n          ),\n        interval,\n        setInterval,\n      );\n    };\n    // Pause the slider on drag\n    if (options.pauseOnDrag !== false) {\n      slider.on(\"dragStarted\", () => dispose?.());\n    }\n    createEffect(() =>\n      !options.pause || options.pause() === false ? start() : dispose?.(),\n    );\n  };\n};\n"],"names":["autoplay","interval","options","slider","dispose","start","makeTimer","moveToIdx","track","details","position","animation","setInterval","pauseOnDrag","on","createEffect","pause"],"mappings":";;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,QAAQ,GAAGA,CACtBC,QAAgB,GAAG,IAAI,EACvBC,OAOC,KACE;AACH,EAAA,OAAQC,MAA0B,IAAK;AACrC,IAAA,IAAIC,OAAiB;IACrB,MAAMC,KAAK,GAAGA,MAAM;AAClBD,MAAAA,OAAO,GAAGE,SAAS,CACjB,MACEH,MAAM,CAACI,SAAS,CACdJ,MAAM,CAACK,KAAK,CAACC,OAAO,CAACC,QAAQ,GAAG,CAAC,EACjC,IAAI,EACJR,OAAO,CAACS,SACV,CAAC,EACHV,QAAQ,EACRW,WACF,CAAC;IACH,CAAC;AACD;AACA,IAAA,IAAIV,OAAO,CAACW,WAAW,KAAK,KAAK,EAAE;MACjCV,MAAM,CAACW,EAAE,CAAC,aAAa,EAAE,MAAMV,OAAO,IAAI,CAAC;AAC7C,IAAA;IACAW,YAAY,CAAC,MACX,CAACb,OAAO,CAACc,KAAK,IAAId,OAAO,CAACc,KAAK,EAAE,KAAK,KAAK,GAAGX,KAAK,EAAE,GAAGD,OAAO,IACjE,CAAC;EACH,CAAC;AACH;;;;"}

package/dist/index/components.d.ts

@@ -48,4 +48,69 @@ export declare const SliderButton: FlowComponent<{
         [k: string]: boolean | undefined;
     };
 }>;
+/**
+ * Navigation dots component for the slider.
+ * Displays a dot for each slide and highlights the current slide.
+ *
+ * @param props {string} class - Class to override the dots container.
+ * @param props {object} classList - List of classes to override the dots container.
+ * @param props {string} dotClass - Class to override individual dots.
+ * @param props {object} 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 declare const SliderDots: FlowComponent<{
+    class?: string;
+    classList?: {
+        [k: string]: boolean | undefined;
+    };
+    dotClass?: string;
+    dotClassList?: {
+        [k: string]: boolean | undefined;
+    };
+}>;
+/**
+ * Thumbnail navigation component for the slider.
+ * A second Slider that synchronizes with the main slider.
+ * User provides thumbnail slides as children.
+ *
+ * @param props {KeenSliderOptions} options - Options for the thumbnail slider.
+ * @param props {KeenSliderPlugin[]} 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 declare const SliderThumbnails: FlowComponent<{
+    options?: KeenSliderOptions;
+    plugins?: KeenSliderPlugin[];
+    activeClass?: string;
+}>;
 export {};

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";
@@ -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 {string} class - Class to override the dots container.
+ * @param props {object} classList - List of classes to override the dots container.
+ * @param props {string} dotClass - Class to override individual dots.
+ * @param props {object} 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 {KeenSliderOptions} options - Options for the thumbnail slider.
+ * @param props {KeenSliderPlugin[]} 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>;
+};