{"id":15423417,"url":"https://github.com/yoonbuck/svelte-snappy-carousel","last_synced_at":"2025-04-12T02:11:02.959Z","repository":{"id":143913547,"uuid":"407028273","full_name":"yoonbuck/svelte-snappy-carousel","owner":"yoonbuck","description":"Page-snapping carousel for svelte","archived":false,"fork":false,"pushed_at":"2021-10-09T23:08:04.000Z","size":114,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-10T11:18:33.925Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/yoonbuck.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-09-16T05:09:02.000Z","updated_at":"2021-10-09T23:08:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"1f7f7327-7cd7-4d80-91be-6fbfc13a55b9","html_url":"https://github.com/yoonbuck/svelte-snappy-carousel","commit_stats":{"total_commits":18,"total_committers":1,"mean_commits":18.0,"dds":0.0,"last_synced_commit":"b58c15f69b3ff37e9888abfa7d33536e71b6bef2"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoonbuck%2Fsvelte-snappy-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoonbuck%2Fsvelte-snappy-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoonbuck%2Fsvelte-snappy-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoonbuck%2Fsvelte-snappy-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yoonbuck","download_url":"https://codeload.github.com/yoonbuck/svelte-snappy-carousel/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505929,"owners_count":21115354,"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-10-01T17:42:51.248Z","updated_at":"2025-04-12T02:11:02.940Z","avatar_url":"https://github.com/yoonbuck.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-snappy-carousel\n\nTouch-friendly snappy horizontal carousel for svelte.\n\n[Demo](https://svelte-snappy-carousel.dev.yoonbuck.com/)\n\n## Usage\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import { Carousel, CarouselItem } from \"svelte-snappy-carousel\";\n\u003c/script\u003e\n\n\u003cCarousel\u003e\n  \u003c!-- CarouselItems represent carousel panes --\u003e\n  \u003cCarouselItem\u003e\n    \u003ch1\u003ePane 1\u003c/h1\u003e\n    \u003cp\u003e...\u003c/p\u003e\n  \u003c/CarouselItem\u003e\n  \u003cCarouselItem\u003e\n    \u003ch1\u003ePane 2\u003c/h1\u003e\n    \u003cp\u003e...\u003c/p\u003e\n  \u003c/CarouselItem\u003e\n  \u003cCarouselItem\u003e\n    \u003ch1\u003ePane 3\u003c/h1\u003e\n    \u003cp\u003e...\u003c/p\u003e\n  \u003c/CarouselItem\u003e\n\u003c/Carousel\u003e\n```\n\n## Adding controls\n\nUse `slot=\"inner-controls\"` or `slot=\"outer-controls\"` to add controls to the carousel.\n\n`inner-controls` will be placed inside the carousel container; `outer-controls` will be after.\n\n```svelte\n\u003cCarousel\u003e\n  \u003c!-- ... --\u003e\n  \u003cdiv\n    slot=\"inner-controls\"\n    class=\"controls\"\n    let:position\n    let:count\n    let:previous\n    let:previousAvailable\n    let:next\n    let:nextAvailable\n  \u003e\n    \u003cbutton on:click={previous} disabled={!previousAvailable}\u003e←\u003c/button\u003e\n    {position + 1} / {count}\n    \u003cbutton on:click={next} disabled={!nextAvailable}\u003e→\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/Carousel\u003e\n\n\u003cstyle\u003e\n  .controls {\n    /* e.g., position absolutely inside carousel container */\n  }\n\u003c/style\u003e\n```\n\n# Limitations\n\nThese are some\nthings to watch out for. Note that these limitations might change in the future.\n\n- **No nested Carousels**\n\n  You can't place a `\u003cCarousel\u003e` inside another `\u003cCarousel\u003e`\n\n- **No dynamic content**\n\n  You shouldn't add or remove `\u003cCarouselItem\u003e`s after the parent `\u003cCarousel\u003e` is mounted.\n\n  It's okay to use an `{#each}` block if you know the backing array won't change. The contents of the array can change, as long as the `(key)`s stay the same, and the array doesn't grow or shrink.\n\n  If you're loading content asynchronously, you should either wrap the entire `\u003cCarousel\u003e` in your `{#await}` block, or place `{#await}` blocks inside of individual `\u003cCarouselItem\u003e` components.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoonbuck%2Fsvelte-snappy-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyoonbuck%2Fsvelte-snappy-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoonbuck%2Fsvelte-snappy-carousel/lists"}