solid-slider 1.3.19 → 1.3.21

package/README.md

@@ -1,3 +1,8 @@
+<p>
+  <img width="100%" src="https://assets.solidjs.com/banner?type=Solid%20Slider&background=tiles&project=%20" alt="Solid Slider">
+</p>
+
+
 # Solid Slider
 
 [![size](https://img.shields.io/bundlephobia/minzip/solid-slider?style=for-the-badge)](https://bundlephobia.com/package/solid-slider)
@@ -71,7 +76,7 @@ const MyComponent = () => {
       </Slider>
       <SliderButton prev>Previous</SliderButton>
       <SliderButton next>Next</SliderButton>
-    <SliderProvider>
+    </SliderProvider>
   );
 };
 ```
@@ -212,6 +217,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 +376,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 +392,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))
@@ -258,8 +402,11 @@ Thie library exports it's own CSS which is the basic Keen-Slider implementation
 - 1.3.14 - Patched npm packaging issue (thanks [joeygrable94 ](https://www.github.com/joeygrable94))
 - 1.3.15 - Updated to Solid 1.7.11
 - 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.17 - Added types 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
+- 1.3.21 - Patched type for SliderDots (thanks [Violettica](https://github.com/Violettica)), improved additional types.
 
 ## 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/autoplay.d.ts

@@ -3,13 +3,13 @@ import { Accessor } from "solid-js";
 /**
  * Provides an autoplay plugin.
  *
- * @param {number} interval Interval in milliseconds for switching slides
- * @param {object} options Options to customize the autoplay
- * @param {Function} options.pause A pause signal to control the autoplay
- * @param {boolean} options.pauseOnDrag Denotes of the autoplay should pause on drag.
- * @param {object} options.animation Allows for control of duration and easing.
- * @param {number} options.duration Duration for transitioning the slide.
- * @param {number} options.easing Easing function for the transition animation.
+ * @param interval - Interval in milliseconds for switching slides
+ * @param options - Options to customize the autoplay
+ * @param options.pause - A pause signal to control the autoplay
+ * @param options.pauseOnDrag - Denotes of the autoplay should pause on drag.
+ * @param options.animation - Allows for control of duration and easing.
+ * @param options.duration - Duration for transitioning the slide.
+ * @param options.easing - Easing function for the transition animation.
  *
  * @example
  * ```ts

package/dist/autoplay/autoplay.jsx

@@ -3,13 +3,13 @@ import { createEffect } from "solid-js";
 /**
  * Provides an autoplay plugin.
  *
- * @param {number} interval Interval in milliseconds for switching slides
- * @param {object} options Options to customize the autoplay
- * @param {Function} options.pause A pause signal to control the autoplay
- * @param {boolean} options.pauseOnDrag Denotes of the autoplay should pause on drag.
- * @param {object} options.animation Allows for control of duration and easing.
- * @param {number} options.duration Duration for transitioning the slide.
- * @param {number} options.easing Easing function for the transition animation.
+ * @param interval - Interval in milliseconds for switching slides
+ * @param options - Options to customize the autoplay
+ * @param options.pause - A pause signal to control the autoplay
+ * @param options.pauseOnDrag - Denotes of the autoplay should pause on drag.
+ * @param options.animation - Allows for control of duration and easing.
+ * @param options.duration - Duration for transitioning the slide.
+ * @param options.easing - Easing function for the transition animation.
  *
  * @example
  * ```ts

package/dist/autoplay/index.common.js

@@ -6,40 +6,30 @@ var solidJs = require('solid-js');
 /**
  * Provides an autoplay plugin.
  *
- * @param {number} interval Interval in milliseconds for switching slides
- * @param {object} options Options to customize the autoplay
- * @param {Function} options.pause A pause signal to control the autoplay
- * @param {boolean} options.pauseOnDrag Denotes of the autoplay should pause on drag.
- * @param {object} options.animation Allows for control of duration and easing.
- * @param {number} options.duration Duration for transitioning the slide.
- * @param {number} options.easing Easing function for the transition animation.
+ * @param interval - Interval in milliseconds for switching slides
+ * @param options - Options to customize the autoplay
+ * @param options.pause - A pause signal to control the autoplay
+ * @param options.pauseOnDrag - Denotes of the autoplay should pause on drag.
+ * @param options.animation - Allows for control of duration and easing.
+ * @param options.duration - Duration for transitioning the slide.
+ * @param options.easing - Easing function for the transition animation.
  *
  * @example
  * ```ts
  * 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 interval - Interval in milliseconds for switching slides\n * @param options - Options to customize the autoplay\n * @param options.pause - A pause signal to control the autoplay\n * @param options.pauseOnDrag - Denotes of the autoplay should pause on drag.\n * @param options.animation - Allows for control of duration and easing.\n * @param options.duration - Duration for transitioning the slide.\n * @param 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

@@ -4,40 +4,30 @@ import { createEffect } from 'solid-js';
 /**
  * Provides an autoplay plugin.
  *
- * @param {number} interval Interval in milliseconds for switching slides
- * @param {object} options Options to customize the autoplay
- * @param {Function} options.pause A pause signal to control the autoplay
- * @param {boolean} options.pauseOnDrag Denotes of the autoplay should pause on drag.
- * @param {object} options.animation Allows for control of duration and easing.
- * @param {number} options.duration Duration for transitioning the slide.
- * @param {number} options.easing Easing function for the transition animation.
+ * @param interval - Interval in milliseconds for switching slides
+ * @param options - Options to customize the autoplay
+ * @param options.pause - A pause signal to control the autoplay
+ * @param options.pauseOnDrag - Denotes of the autoplay should pause on drag.
+ * @param options.animation - Allows for control of duration and easing.
+ * @param options.duration - Duration for transitioning the slide.
+ * @param options.easing - Easing function for the transition animation.
  *
  * @example
  * ```ts
  * 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 interval - Interval in milliseconds for switching slides\n * @param options - Options to customize the autoplay\n * @param options.pause - A pause signal to control the autoplay\n * @param options.pauseOnDrag - Denotes of the autoplay should pause on drag.\n * @param options.animation - Allows for control of duration and easing.\n * @param options.duration - Duration for transitioning the slide.\n * @param 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

@@ -1,4 +1,4 @@
-import { FlowComponent } from "solid-js";
+import { FlowComponent, Component } from "solid-js";
 import { KeenSliderOptions, KeenSliderPlugin } from "keen-slider";
 interface Func<T> {
     ([...args]: any, args2?: any): T;
@@ -17,15 +17,15 @@ export declare const SliderContext: import("solid-js").Context<import("solid-js"
 /**
  * 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 declare const SliderProvider: FlowComponent;
 /**
  * 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 declare const Slider: FlowComponent<{
     options?: KeenSliderOptions;
@@ -34,10 +34,10 @@ export declare const Slider: FlowComponent<{
 /**
  * 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 declare const SliderButton: FlowComponent<{
     next?: boolean;
@@ -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.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 declare const SliderDots: Component<{
+    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.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 declare const SliderThumbnails: FlowComponent<{
+    options?: KeenSliderOptions;
+    plugins?: KeenSliderPlugin[];
+    activeClass?: string;
+}>;
 export {};