{"id":25461092,"url":"https://github.com/hyunbinseo/swipe-scroller","last_synced_at":"2025-11-03T11:30:39.692Z","repository":{"id":82569140,"uuid":"600093072","full_name":"hyunbinseo/swipe-scroller","owner":"hyunbinseo","description":"Lightweight Slider and Carousel","archived":false,"fork":false,"pushed_at":"2025-02-11T01:47:37.000Z","size":647,"stargazers_count":17,"open_issues_count":2,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-16T11:56:14.797Z","etag":null,"topics":["carousel","scroller","slider","svelte"],"latest_commit_sha":null,"homepage":"https://demo.hyunbin.page/swipe-scroller","language":"Svelte","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/hyunbinseo.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":"2023-02-10T15:11:49.000Z","updated_at":"2025-02-11T01:47:40.000Z","dependencies_parsed_at":"2023-03-12T16:14:14.107Z","dependency_job_id":"ddf96c08-1cb2-41fc-a374-3e44efbda91e","html_url":"https://github.com/hyunbinseo/swipe-scroller","commit_stats":{"total_commits":40,"total_committers":1,"mean_commits":40.0,"dds":0.0,"last_synced_commit":"3e727d1dffe142d44515c467c53b1ab295925648"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyunbinseo%2Fswipe-scroller","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyunbinseo%2Fswipe-scroller/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyunbinseo%2Fswipe-scroller/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyunbinseo%2Fswipe-scroller/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hyunbinseo","download_url":"https://codeload.github.com/hyunbinseo/swipe-scroller/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239126498,"owners_count":19586100,"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":["carousel","scroller","slider","svelte"],"created_at":"2025-02-18T05:22:29.934Z","updated_at":"2025-02-18T05:22:30.655Z","avatar_url":"https://github.com/hyunbinseo.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Swipe Scroller for Svelte\n\nHorizontal card slider for the modern web. Requires minimum JavaScript. [Demo]\n\n[demo]: https://demo.hyunbin.page/swipe-scroller\n\n## Features\n\n- **Performant** - scrolling and snapping are powered by CSS, not JS.\n- **Accessible** - control with touch, scroll, click[^1], and keyboard[^2].\n- **Customizable** - override the provided buttons and the `\u003cnoscript\u003e`.\n\n[^1]: The buttons are shown only when hovered with `@media (pointer: fine)` such as a mouse cursor.\n\n[^2]: For accessibility, wrap the card component with [tabbable elements] such as `\u003ca\u003e` or `\u003cbutton\u003e`.\n\n[tabbable elements]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex\n\n## Browser Support\n\nTested on the latest evergreen browsers.\n\n|                       | Chrome | Safari | Firefox | Safari (iOS) | Samsung Internet |\n| --------------------- | ------ | ------ | ------- | ------------ | ---------------- |\n| CSS [Scroll Snap]     | 69     | 11     | 68      | 11           | 10.1             |\n| CSS [Scroll-behavior] | 61     | 15.4   | 36      | 15.4         | 8.2              |\n\n[Scroll Snap]: https://caniuse.com/css-snappoints\n[Scroll-behavior]: https://caniuse.com/css-scroll-behavior\n\n## Quick Start\n\n```bash\nnpm create svelte@latest\nnpm i swipe-scroller -D\n```\n\nFollowing code is based on [SvelteKit] v1.\n\n[SvelteKit]: https://kit.svelte.dev/\n\n```svelte\n\u003c!-- src/routes/+layout.svelte --\u003e\n\n\u003cscript\u003e\n  import 'swipe-scroller/style';\n\u003c/script\u003e\n\n\u003cdiv class=\"container-outer\" style=\"position: fixed; inset: 0;\" /\u003e\n\n\u003cdiv style=\"position: relative; overflow-x: hidden;\"\u003e\n  \u003cslot /\u003e\n\u003c/div\u003e\n```\n\n```svelte\n\u003c!-- src/routes/+page.svelte --\u003e\n\n\u003cscript\u003e\n  import Scroller from 'swipe-scroller/Scroller.svelte';\n\u003c/script\u003e\n\n\u003cdiv class=\"container-inner\"\u003e\n  \u003ch1\u003eSwipe Scroller\u003c/h1\u003e\n\u003c/div\u003e\n\n\u003cScroller\u003e\n  {#each { length: 5 } as _, index}\n    \u003ca href=\"#{index}\" class=\"card\"\u003e\n      \u003cimg src=\"https://picsum.photos/572?random={index}\" draggable=\"false\" alt=\"\" /\u003e\n      \u003cdiv\u003eCard No. {index + 1}\u003c/div\u003e\n    \u003c/a\u003e\n  {/each}\n\u003c/Scroller\u003e\n\n\u003cstyle\u003e\n  .card {\n    text-decoration: none;\n    color: white;\n    background-color: gray;\n    width: 80%;\n    min-width: 224px;\n    max-width: 296px;\n    overflow: hidden;\n  }\n\n  .card \u003e img {\n    display: block;\n    aspect-ratio: 1;\n    width: 100%;\n  }\n\n  .card \u003e div {\n    padding: 1rem;\n    text-align: center;\n  }\n\u003c/style\u003e\n```\n\nReference [how it works](docs/how-it-works.md) for an in-depth explanation.\n\n## Events\n\nThe following DOM events are [forwarded] to the component.\n\n[forwarded]: https://svelte.dev/tutorial/dom-event-forwarding\n\n- [scroll](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event)\n- [scrollend](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollend_event) - limited browser support\n\n```svelte\n\u003c!-- Provide custom callbacks if needed. --\u003e\n\u003cScroller on:scroll on:scrollend /\u003e\n```\n\n## Options\n\n```typescript\n// Optional Component Props\n\n/** Width and height of the clickable control buttons. */\nexport let buttonWidth = '2.5rem';\n/** Horizontal gap between the provided card components. */\nexport let cardGap = '1.25rem';\n\n/** Hang control buttons on the outer container border. */\nexport let hangButtons = true;\n/** Invert the scroll direction of the control buttons. */\nexport let invertButtons = false;\n```\n\n\u003c!-- Add image with explanation --\u003e\n\n## Slots\n\n```svelte\n\u003c!-- Optional Named Slots --\u003e\n\n\u003cslot name=\"noscript\" /\u003e\n\u003cslot name=\"button-prev\" /\u003e\n\u003cslot name=\"button-next\" /\u003e\n```\n\n## Limitations\n\n- JavaScript is required to enable horizontal scroll.\n- Card components should have identical width.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyunbinseo%2Fswipe-scroller","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhyunbinseo%2Fswipe-scroller","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyunbinseo%2Fswipe-scroller/lists"}