{"id":13531961,"url":"https://github.com/davedbase/solid-slider","last_synced_at":"2025-05-16T12:09:28.967Z","repository":{"id":50377597,"uuid":"387058426","full_name":"davedbase/solid-slider","owner":"davedbase","description":"A carousel/slider implementation for SolidJS. ","archived":false,"fork":false,"pushed_at":"2025-01-25T13:49:51.000Z","size":539,"stargazers_count":112,"open_issues_count":1,"forks_count":10,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T06:18:58.491Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davedbase.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-18T00:07:51.000Z","updated_at":"2025-04-10T11:45:11.000Z","dependencies_parsed_at":"2024-06-19T14:58:50.233Z","dependency_job_id":"efc81352-9b94-4750-9bf6-4fde512a7b8f","html_url":"https://github.com/davedbase/solid-slider","commit_stats":{"total_commits":37,"total_committers":10,"mean_commits":3.7,"dds":0.7837837837837838,"last_synced_commit":"2477787f7e64978d8c9236e808cff9743e19334a"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davedbase%2Fsolid-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davedbase%2Fsolid-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davedbase%2Fsolid-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davedbase%2Fsolid-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davedbase","download_url":"https://codeload.github.com/davedbase/solid-slider/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248525139,"owners_count":21118620,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T07:01:07.203Z","updated_at":"2025-04-12T06:19:04.601Z","avatar_url":"https://github.com/davedbase.png","language":"TypeScript","funding_links":[],"categories":["📦 Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"# Solid Slider\n\n[![size](https://img.shields.io/bundlephobia/minzip/solid-slider?style=for-the-badge)](https://bundlephobia.com/package/solid-slider)\n[![size](https://img.shields.io/npm/v/solid-slider?style=for-the-badge)](https://www.npmjs.com/package/solid-slider)\n![npm](https://img.shields.io/npm/dw/solid-slider?style=for-the-badge)\n\nA carousel/slider implementation in TypeScript for [Solid](https://www.solidjs.com). It's built on Keen-Slider 6, an open-source library agnostic touch slider with native touch/swipe behavior and great performance. It comes with no dependencies, TypeScript support, multitouch support and is compatible with all common browsers.\n\nThis package providers both primitive \u0026 directive as well as components. You may use either according to your preference. Note that for better SSR support, the component is recommended over the directive.\n\n## Installation\n\n```bash\n## npm\nnpm install solid-slider\n## bun\nbun add solid-slider\n## yarn\nyarn add solid-slider\n## pnpm\npnpm add solid-slider\n```\n\nImport either the directive or component as you'd like:\n\n```ts\nimport { Slider, createSlider } from \"solid-slider\";\nimport \"solid-slider/slider.css\";\n```\n\n## Demo\n\nYou can find a functional demo of the slider with most features implemented here: https://codesandbox.io/s/solid-slider-j0x2g\n\n## Plugins\n\nPlugins may be added directly via the createSlider primitive. You may add a Keen-Slider plugin directly or built-in plugins shipped with this package. Currently an autoplay plugin is available that will assist with autoplaying actions in the slider. Simply add the plugins after the options parameter. Please feel free to post requests for additional plugins or submit PRs if you decide to improve the base functionality. Some ideas for additional plugins include:\n\n- Slider nav (dot, arrow controls even thumbnails)\n- Lazy loaded images\n- Slide transitions\n\nDetails on applying plugins are available for each use below.\n\n## Use as Component\n\nThe following is an example of how to use the component.\n\n```tsx\nconst MyComponent = () =\u003e {\n  return (\n    \u003cSlider options={{ loop: true }}\u003e\n      \u003cdiv\u003eSlide 1\u003c/div\u003e\n      \u003cdiv\u003eSlide 2\u003c/div\u003e\n      \u003cdiv\u003eSlide 3\u003c/div\u003e\n    \u003c/Slider\u003e\n  );\n};\n```\n\nYou may also use the next and previous button. Note that you must wrap your `Slider` with `SliderProvider`.\n\n```tsx\nconst MyComponent = () =\u003e {\n  return (\n    \u003cSliderProvider\u003e\n      \u003cSlider options={{ loop: true }}\u003e\n        \u003cdiv\u003eSlide 1\u003c/div\u003e\n        \u003cdiv\u003eSlide 2\u003c/div\u003e\n        \u003cdiv\u003eSlide 3\u003c/div\u003e\n      \u003c/Slider\u003e\n      \u003cSliderButton prev\u003ePrevious\u003c/SliderButton\u003e\n      \u003cSliderButton next\u003eNext\u003c/SliderButton\u003e\n    \u003cSliderProvider\u003e\n  );\n};\n```\n\n### Autoplay Plugin\n\nYou may include the autoplay plugin by providing it as a prop:\n\n```tsx\nimport createSlider from \"solid-slider\";\nimport autoplay from \"solid-slider/plugins/autoplay\";\n\nconst MyComponent = () =\u003e {\n  return (\n    \u003cSlider options={{ loop: true }} plugins={[autoplay(1500, {})]}\u003e\n      \u003cdiv class=\"slide1\"\u003e1\u003c/div\u003e\n      \u003cdiv class=\"slide2\"\u003e2\u003c/div\u003e\n      \u003cdiv class=\"slide3\"\u003e3\u003c/div\u003e\n      \u003cdiv class=\"slide4\"\u003e4\u003c/div\u003e\n      \u003cdiv class=\"slide5\"\u003e5\u003c/div\u003e\n      \u003cdiv class=\"slide6\"\u003e6\u003c/div\u003e\n    \u003c/Slider\u003e\n  );\n};\n```\n\n### Adaptive Height Plugin\n\nYou may include the adaptive height plugin by providing it as a prop:\n\n```tsx\nimport createSlider from \"solid-slider\";\nimport autoplay from \"solid-slider/plugins/adaptiveHeight\";\n\nconst MyComponent = () =\u003e {\n  return (\n    \u003cSlider options={{ loop: true }} plugins={[adaptiveHeight]}\u003e\n      \u003cdiv class=\"slide1\"\u003e1\u003c/div\u003e\n      \u003cdiv class=\"slide2\"\u003e2\u003c/div\u003e\n      \u003cdiv class=\"slide3\"\u003e3\u003c/div\u003e\n    \u003c/Slider\u003e\n  );\n};\n```\n\n### Adaptive Width Plugin\n\nYou may include the adaptive width plugin by providing it as a prop:\n\n```tsx\nimport { createSlider } from \"solid-slider\";\nimport { autoplay } from \"solid-slider/plugins/adaptiveWidth\";\n\nconst MyComponent = () =\u003e {\n  return (\n    \u003cSlider options={{ loop: true }} plugins={[adaptiveWidth]}\u003e\n      \u003cdiv class=\"slide1\"\u003e1\u003c/div\u003e\n      \u003cdiv class=\"slide2\"\u003e2\u003c/div\u003e\n      \u003cdiv class=\"slide3\"\u003e3\u003c/div\u003e\n    \u003c/Slider\u003e\n  );\n};\n```\n\n## Use as Primitive\n\nThe following is an example of how to create and then bind options using a directive.\n\n```tsx\nconst MyComponent = () =\u003e {\n  const options = { duration: 1000 };\n  const [slider, { current, next, prev, moveTo }] = createSlider(options);\n  return (\n    \u003cdiv use:slider\u003e\n      \u003cdiv\u003eSlide 1\u003c/div\u003e\n      \u003cdiv\u003eSlide 2\u003c/div\u003e\n      \u003cdiv\u003eSlide 3\u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\nor without a directive:\n\n```tsx\nconst MyComponent = () =\u003e {\n  let ref: HTMLElement;\n  const options = { duration: 1000 };\n  const [slider, { current, next, prev, moveTo }] = createSlider(options);\n  onMount(() =\u003e {\n    slider(ref);\n  });\n  return (\n    \u003cdiv ref={ref}\u003e\n      \u003cdiv\u003eSlide 1\u003c/div\u003e\n      \u003cdiv\u003eSlide 2\u003c/div\u003e\n      \u003cdiv\u003eSlide 3\u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\nThe primitive itself returns the following shape:\n\n```ts\ntype SliderControls\u003cO, P, H extends string\u003e = [\n  create: (el: HTMLElement) =\u003e void,\n  helpers: {\n    current: Accessor\u003cnumber\u003e;\n    next: VoidFunction;\n    prev: VoidFunction;\n    moveTo: (id: number, duration?: number, absolute?: boolean, easing?: (t: number) =\u003e number) =\u003e void;\n    details: () =\u003e TrackDetails;\n    slider: () =\u003e KeenSliderInstance\u003cO, P, H\u003e | undefined;\n    destroy: VoidFunction;\n    update: VoidFunction;\n  },\n];\n```\n\nNote that only the `current` property returned from the primitive is reactive. If you require additional reactivity on slide change you can use the returns slider instance to bind additional events.\n\n### Autoplay\n\nThe autoplay function extends the slider with pausable playing. You can even supply a signal to control toggling autoplay. [Click here](https://codesandbox.io/s/solid-slider-autoplay-plugin-h2wphk?file=/src/index.tsx) for a demo of autoplay.\n\n```ts\nimport { createSlider } from \"solid-slider\";\nimport { autoplay } from \"solid-slider/plugins/autoplay\";\n\nconst [pause, togglePause] = createSignal(false);\nconst [slider] = createSlider(\n  { loop: true },\n  autoplay(2000, {\n    pause,\n    pauseOnDrag: true,\n  }),\n);\n```\n\n## SolidStart \u0026 Server-Side Rendering\n\nSo 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.\n\nFurthermore there's typically a small window of window between when the slider is sent to the browser and the moment it hydrates and becomes interactive. Given this is how all frameworks operate you're likely to experience the dreaded FOUC (flash of un-styled content).\n\nTo mitigate this issue you have two options available. You could add CSS styles (`visibility: hidden` or `hidden` in Tailwind) to hide the content and use the `created` callback in options to remove it from the slider once it's been created on the page. You could also initially style your slider correctly so it doesn't flash at all.\n\nAlternatively you can use [`clientOnly`](https://docs.solidjs.com/solid-start/reference/client/client-only#clientonly) to ensure it isn't part of the SSR process. This is a bit lazy and not ideal in situations where you want content on your page to render for SEO purposes.\n\n## Implementation\n\nSolid Slider is meant to be a lightweight and compact wrapper of Keen-Slider. It exposes helpers to make working with the slider convenient. Note that the when the slider mounts it assumes all children in the el are slides. You can override this functionality by passing in a \"selector\" value to target the specific slides you'd like to include.\n\nThie library exports it's own CSS which is the basic Keen-Slider implementation for convenience. If you supply options as an accessor function, the slider will reactively update the configuration so that you don't have to destroy and recreate the slider. As of Keen-Slider 6 plugins are now fully supported. You may supply them as a param in createSlider. Note that plugins are not reactively updated and must be supplied on creation.\n\n## Roadmap\n\n- [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\n- [x] Create [adaptiveWidth](https://github.com/joeygrable94/solid-slider) plugin\n- [ ] Add Dots components (to display a row of dots below the slider)\n- [ ] Add slider thumbnail navigation\n- [ ] Add slider loader\n- [ ] Build [timepicker](https://keen-slider.io/examples#timepicker) component\n- [ ] Create [Scroll Wheel](https://keen-slider.io/examples#scroll-wheel-controls) component\n\n## Changelog\n\n- 1.0.0 - Initial release\n- 1.0.3 - Changed the exported API to be slightly more flexible.\n- 1.1.1 - Upgraded to Keen-Slider 6 and improved general reactivity.\n- 1.2.5 - Added autoplay plugin and general plugin structure.\n- 1.2.7 - Maybe I should actually export the .css? That'd be a good idea, right? /s\n- 1.2.9 - Updated timer primitive and patched issue with current slide setting from initial options.\n- 1.3.1 - Introduced Slider, SliderProvider and SliderButton for ease.\n- 1.3.2 - Patched issue with initial slide not setting current signal.\n- 1.3.5 - Updated to latest SolidJS version.\n- 1.3.7 - Fixed TS issues updated to latest KeenSlider.\n- 1.3.8 - Updated to Solid 1.5\n- 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))\n- 1.3.11 - Upgraded importance dependencies including Solid 1.6\n- 1.3.12 - Patched slider to reactively update on updating children\n- 1.3.13 - Incorporated adaptiveHeight plugin (thanks [joeygrable94](https://www.github.com/joeygrable94))\n- 1.3.14 - Patched npm packaging issue (thanks [joeygrable94 ](https://www.github.com/joeygrable94))\n- 1.3.15 - Updated to Solid 1.7.11\n- 1.3.16 - Updated dependencies and move Solid from dependency to peer\n- 1.3.17 - Added typs definition to exports (thanks [ChristophP](https://github.com/ChristophP))\n- 1.3.18 - Adjusted documentation and minor source cleanup\n- 1.3.19 - Attempt to fix export paths\n\n## Keen Options API\n\nYou 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.\n\n- [Options](https://keen-slider.io/docs#options)\n- [Event Hooks](https://keen-slider.io/docs#event-hooks)\n- [Methods](https://keen-slider.io/docs#methods)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavedbase%2Fsolid-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavedbase%2Fsolid-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavedbase%2Fsolid-slider/lists"}