{"id":24304285,"url":"https://github.com/gradleless/svelte-slider","last_synced_at":"2026-04-22T09:32:02.181Z","repository":{"id":271614495,"uuid":"913994028","full_name":"Gradleless/svelte-slider","owner":"Gradleless","description":"A svelte 5 slider","archived":false,"fork":false,"pushed_at":"2025-05-12T18:35:51.000Z","size":149,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-12T19:49:35.304Z","etag":null,"topics":["slider","svelte","svelte5","typescript"],"latest_commit_sha":null,"homepage":"","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Gradleless.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2025-01-08T18:37:28.000Z","updated_at":"2025-05-12T18:35:47.000Z","dependencies_parsed_at":"2025-01-08T20:42:35.458Z","dependency_job_id":"31391b76-81d9-46c8-9ceb-44c0974736ae","html_url":"https://github.com/Gradleless/svelte-slider","commit_stats":null,"previous_names":["gradleless/svelte-slider"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/Gradleless/svelte-slider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gradleless%2Fsvelte-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gradleless%2Fsvelte-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gradleless%2Fsvelte-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gradleless%2Fsvelte-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Gradleless","download_url":"https://codeload.github.com/Gradleless/svelte-slider/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gradleless%2Fsvelte-slider/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32129638,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-22T08:34:57.708Z","status":"ssl_error","status_checked_at":"2026-04-22T08:34:55.583Z","response_time":58,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["slider","svelte","svelte5","typescript"],"created_at":"2025-01-17T01:19:18.812Z","updated_at":"2026-04-22T09:32:02.162Z","avatar_url":"https://github.com/Gradleless.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Svelte-slider\n\nA modern, customizable slider component built for Svelte 5. (Kinda poorly written)\n\n## Installation\n\n```bash\nnpm i svelte5-slider\n```\n\n## Features\n\n- Smooth horizontal scrolling\n- Dynamic button visibility based on scroll position\n- Customizable button styles and icons\n- Responsive design\n- Built with TypeScript\n- Tailwind CSS support\n\n## Usage\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\nimport { Slider } from 'svelte-slider';\nimport type { SliderItem } from 'svelte-slider';\n\nconst cardItems: SliderItem[] = [\n                                    {\n                                        data: { / your card data / }\n                                    }\n                                ];\n\n\u003c/script\u003e\n\n\u003cSlider {cardItems} {Item} /\u003e\n\n{#snippet Item()}\n    \u003c!-- Ur snippet --\u003e\n{/snippet}\n```\n\n## Components\n\n### Slider\n\nThe main component that orchestrates the slider functionality.\n\n#### Props\n\n- `cardItems`: Array of `SliderItem` objects\n- `buttonProps`: (Optional) Customization options for the slider buttons\n- `Item`: Snippet of your items\n\n### ButtonSlider\n\nHandles the navigation buttons for the slider.\n\n#### Props\n\n- `direction`: 'left' | 'right'\n- `containerClasses`: Custom classes for the button container\n- `buttonClasses`: Custom classes for the button element\n- `iconClasses`: Custom classes for the icon\n- `Icon`: Custom icon component (optional)\n- `scrollFunc`: Function to handle scroll behavior\n\n### SliderContainer\n\nContains the scrollable content of the slider.\n\n#### Props\n\n- `scrollContainer`: Reference to the container element\n- `cardItems`: Array of items to display\n- `scrollEvent`: Function to handle scroll events\n- `Item`: Snippet of your items\n\n## Types\n\n```typescript\n\ninterface SliderItem {\n    Item: Snippet\u003c[any]\u003e;\n    href: string;\n    data: any;\n}\n\ninterface ButtonSliderR {\n    containerClasses?: string;\n    buttonClasses?: string;\n    iconClasses?: string;\n    gradientClasses?: string;\n    Icon?: typeof IconType; // Lucide Icons type\n}\n\ninterface SliderProps {\n    cardItems: SliderItem[];\n    buttonProps?: ButtonSliderR;\n}\n```\n\n## Customization\n\nThe slider comes with default styling using Tailwind CSS, but you can customize the appearance by passing custom classes through the `buttonProps`:\n\n```svelte\n\u003cSlider\n    cardItems={items}\n    buttonProps={{\n        containerClasses: \"your-custom-container-classes\",\n        buttonClasses: \"your-custom-button-classes\",\n        iconClasses: \"your-custom-icon-classes\",\n    }}\n    {Item}\n/\u003e\n```\n\n## Dependencies\n\n- Svelte 5.0.0 or higher\n- Lucide Svelte (for default icons)\n- Tailwind CSS (optional but recommended)\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgradleless%2Fsvelte-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgradleless%2Fsvelte-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgradleless%2Fsvelte-slider/lists"}