solid-slider 1.3.8 → 1.3.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -176,11 +176,12 @@ Thie library exports it's own CSS which is the basic Keen-Slider implementation
|
|
|
176
176
|
- 1.3.5 - Updated to latest SolidJS version.
|
|
177
177
|
- 1.3.7 - Fixed TS issues updated to latest KeenSlider.
|
|
178
178
|
- 1.3.8 - Updated to Solid 1.5
|
|
179
|
+
- 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))
|
|
179
180
|
|
|
180
181
|
## Keen Options API
|
|
181
182
|
|
|
182
183
|
You can set options to the slider via parameters. Note that there are other hooks available as well. Only a subset of useful methods are exposed via the primitive although you can access the slider instance as well from the exports to use the methods directly.
|
|
183
184
|
|
|
184
|
-
- [Options](https://keen-slider.io/
|
|
185
|
-
- [Event Hooks](https://keen-slider.io/
|
|
186
|
-
- [Methods](https://keen-slider.io/
|
|
185
|
+
- [Options](https://keen-slider.io/docs#options)
|
|
186
|
+
- [Event Hooks](https://keen-slider.io/docs#event-hooks)
|
|
187
|
+
- [Methods](https://keen-slider.io/docs#methods)
|
|
@@ -23,10 +23,10 @@ const autoplay = (interval = 1000, options) => {
|
|
|
23
23
|
dispose = makeTimer(() => slider.moveToIdx(slider.track.details.position + 1, true, options.animation), interval, setInterval);
|
|
24
24
|
};
|
|
25
25
|
// Pause the slider on drag
|
|
26
|
-
if (options.pauseOnDrag
|
|
27
|
-
slider.on("dragStarted", () => dispose());
|
|
26
|
+
if (options.pauseOnDrag !== false) {
|
|
27
|
+
slider.on("dragStarted", () => dispose?.());
|
|
28
28
|
}
|
|
29
|
-
createEffect(() => (!options.pause || options.pause() === false ? start() : dispose()));
|
|
29
|
+
createEffect(() => (!options.pause || options.pause() === false ? start() : dispose?.()));
|
|
30
30
|
};
|
|
31
31
|
};
|
|
32
32
|
export default autoplay;
|
|
@@ -28,11 +28,11 @@ const autoplay = (interval = 1000, options) => {
|
|
|
28
28
|
}; // Pause the slider on drag
|
|
29
29
|
|
|
30
30
|
|
|
31
|
-
if (options.pauseOnDrag
|
|
32
|
-
slider.on("dragStarted", () => dispose());
|
|
31
|
+
if (options.pauseOnDrag !== false) {
|
|
32
|
+
slider.on("dragStarted", () => dispose?.());
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
solidJs.createEffect(() => !options.pause || options.pause() === false ? start() : dispose());
|
|
35
|
+
solidJs.createEffect(() => !options.pause || options.pause() === false ? start() : dispose?.());
|
|
36
36
|
};
|
|
37
37
|
};
|
|
38
38
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.common.js","sources":["../../src/plugins/autoplay.tsx"],"sourcesContent":["import { Accessor, createEffect } from \"solid-js\";\nimport { makeTimer } from \"@solid-primitives/timer\";\nimport { KeenSliderInstance } from \"keen-slider\";\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 */\nconst 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 () => slider.moveToIdx(slider.track.details.position + 1, true, options.animation),\n interval,\n setInterval\n );\n };\n // Pause the slider on drag\n if (options.pauseOnDrag
|
|
1
|
+
{"version":3,"file":"index.common.js","sources":["../../src/plugins/autoplay.tsx"],"sourcesContent":["import { Accessor, createEffect } from \"solid-js\";\nimport { makeTimer } from \"@solid-primitives/timer\";\nimport { KeenSliderInstance } from \"keen-slider\";\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 */\nconst 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 () => slider.moveToIdx(slider.track.details.position + 1, true, options.animation),\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(() => (!options.pause || options.pause() === false ? start() : dispose?.()));\n };\n};\n\nexport default autoplay;\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;AACMA,MAAAA,QAAQ,GAAG,CACfC,QAAgB,GAAG,IADJ,EAEfC,OAFe,KAUZ;AACH,EAAA,OAAQC,MAAD,IAAgC;AACrC,IAAA,IAAIC,OAAJ,CAAA;;AACA,IAAMC,MAAAA,KAAK,GAAG,MAAM;AAClBD,MAAAA,OAAO,GAAGE,eAAS,CACjB,MAAMH,MAAM,CAACI,SAAP,CAAiBJ,MAAM,CAACK,KAAP,CAAaC,OAAb,CAAqBC,QAArB,GAAgC,CAAjD,EAAoD,IAApD,EAA0DR,OAAO,CAACS,SAAlE,CADW,EAEjBV,QAFiB,EAGjBW,WAHiB,CAAnB,CAAA;AAKD,KAND,CAFqC;;;AAUrC,IAAA,IAAIV,OAAO,CAACW,WAAR,KAAwB,KAA5B,EAAmC;AACjCV,MAAAA,MAAM,CAACW,EAAP,CAAU,aAAV,EAAyB,MAAMV,OAAO,IAAtC,CAAA,CAAA;AACD,KAAA;;AACDW,IAAAA,oBAAY,CAAC,MAAO,CAACb,OAAO,CAACc,KAAT,IAAkBd,OAAO,CAACc,KAAR,EAAA,KAAoB,KAAtC,GAA8CX,KAAK,EAAnD,GAAwDD,OAAO,IAAvE,CAAZ,CAAA;AACD,GAdD,CAAA;AAeD;;;;"}
|
|
@@ -26,11 +26,11 @@ const autoplay = (interval = 1000, options) => {
|
|
|
26
26
|
}; // Pause the slider on drag
|
|
27
27
|
|
|
28
28
|
|
|
29
|
-
if (options.pauseOnDrag
|
|
30
|
-
slider.on("dragStarted", () => dispose());
|
|
29
|
+
if (options.pauseOnDrag !== false) {
|
|
30
|
+
slider.on("dragStarted", () => dispose?.());
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
createEffect(() => !options.pause || options.pause() === false ? start() : dispose());
|
|
33
|
+
createEffect(() => !options.pause || options.pause() === false ? start() : dispose?.());
|
|
34
34
|
};
|
|
35
35
|
};
|
|
36
36
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.js","sources":["../../src/plugins/autoplay.tsx"],"sourcesContent":["import { Accessor, createEffect } from \"solid-js\";\nimport { makeTimer } from \"@solid-primitives/timer\";\nimport { KeenSliderInstance } from \"keen-slider\";\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 */\nconst 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 () => slider.moveToIdx(slider.track.details.position + 1, true, options.animation),\n interval,\n setInterval\n );\n };\n // Pause the slider on drag\n if (options.pauseOnDrag
|
|
1
|
+
{"version":3,"file":"index.module.js","sources":["../../src/plugins/autoplay.tsx"],"sourcesContent":["import { Accessor, createEffect } from \"solid-js\";\nimport { makeTimer } from \"@solid-primitives/timer\";\nimport { KeenSliderInstance } from \"keen-slider\";\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 */\nconst 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 () => slider.moveToIdx(slider.track.details.position + 1, true, options.animation),\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(() => (!options.pause || options.pause() === false ? start() : dispose?.()));\n };\n};\n\nexport default autoplay;\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;AACMA,MAAAA,QAAQ,GAAG,CACfC,QAAgB,GAAG,IADJ,EAEfC,OAFe,KAUZ;AACH,EAAA,OAAQC,MAAD,IAAgC;AACrC,IAAA,IAAIC,OAAJ,CAAA;;AACA,IAAMC,MAAAA,KAAK,GAAG,MAAM;AAClBD,MAAAA,OAAO,GAAGE,SAAS,CACjB,MAAMH,MAAM,CAACI,SAAP,CAAiBJ,MAAM,CAACK,KAAP,CAAaC,OAAb,CAAqBC,QAArB,GAAgC,CAAjD,EAAoD,IAApD,EAA0DR,OAAO,CAACS,SAAlE,CADW,EAEjBV,QAFiB,EAGjBW,WAHiB,CAAnB,CAAA;AAKD,KAND,CAFqC;;;AAUrC,IAAA,IAAIV,OAAO,CAACW,WAAR,KAAwB,KAA5B,EAAmC;AACjCV,MAAAA,MAAM,CAACW,EAAP,CAAU,aAAV,EAAyB,MAAMV,OAAO,IAAtC,CAAA,CAAA;AACD,KAAA;;AACDW,IAAAA,YAAY,CAAC,MAAO,CAACb,OAAO,CAACc,KAAT,IAAkBd,OAAO,CAACc,KAAR,EAAA,KAAoB,KAAtC,GAA8CX,KAAK,EAAnD,GAAwDD,OAAO,IAAvE,CAAZ,CAAA;AACD,GAdD,CAAA;AAeD;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "solid-slider",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.11",
|
|
4
4
|
"description": "A slider utility for SolidJS.",
|
|
5
5
|
"author": "David Di Biase",
|
|
6
6
|
"repository": {
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
"format": "prettier -w \"src/**/*.{js,ts,json,css,tsx,jsx}\"",
|
|
17
17
|
"build": "rollup -c rollup.config.js && cp src/slider.css dist/slider.css && cp src/plugins/adaptiveHeight.css dist/adaptiveHeight/style.css"
|
|
18
18
|
},
|
|
19
|
+
"type": "module",
|
|
19
20
|
"main": "dist/index/index.common.js",
|
|
20
21
|
"module": "dist/index/index.module.js",
|
|
21
22
|
"types": "dist/index/index.d.ts",
|
|
@@ -61,14 +62,14 @@
|
|
|
61
62
|
"plugin"
|
|
62
63
|
],
|
|
63
64
|
"dependencies": {
|
|
64
|
-
"@solid-primitives/timer": "^1.3.
|
|
65
|
-
"keen-slider": "^6.
|
|
66
|
-
"solid-js": "^1.
|
|
65
|
+
"@solid-primitives/timer": "^1.3.4",
|
|
66
|
+
"keen-slider": "^6.8.3",
|
|
67
|
+
"solid-js": "^1.6.0"
|
|
67
68
|
},
|
|
68
69
|
"devDependencies": {
|
|
69
70
|
"esbuild-plugin-solid": "^0.4.2",
|
|
70
|
-
"prettier": "^2.
|
|
71
|
-
"rollup": "^2.
|
|
71
|
+
"prettier": "^2.7.1",
|
|
72
|
+
"rollup": "^2.79.1",
|
|
72
73
|
"rollup-preset-solid": "^1.4.0",
|
|
73
74
|
"typescript": "^4.5.5"
|
|
74
75
|
}
|