{"id":14962593,"url":"https://github.com/vadimkorr/svelte-carousel","last_synced_at":"2025-05-16T09:03:04.732Z","repository":{"id":38220485,"uuid":"328594675","full_name":"vadimkorr/svelte-carousel","owner":"vadimkorr","description":"The awesome carousel component for Svelte 3 :arrow_left: :art: :arrow_right:  ","archived":false,"fork":false,"pushed_at":"2024-08-10T08:56:16.000Z","size":2188,"stargazers_count":293,"open_issues_count":39,"forks_count":67,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-06T05:42:00.120Z","etag":null,"topics":["carousel","carousel-component","svelte","svelte-carousel","sveltejs","sveltejs-language"],"latest_commit_sha":null,"homepage":"https://vadimkorr.github.io/svelte-carousel","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vadimkorr.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-01-11T08:21:27.000Z","updated_at":"2025-05-05T02:31:36.000Z","dependencies_parsed_at":"2024-06-18T13:43:43.586Z","dependency_job_id":"85f6f003-8ada-4207-97eb-f3025497731d","html_url":"https://github.com/vadimkorr/svelte-carousel","commit_stats":{"total_commits":376,"total_committers":12,"mean_commits":"31.333333333333332","dds":0.05053191489361697,"last_synced_commit":"81165fd87212e09e02484e98c2289167701f2f6f"},"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadimkorr%2Fsvelte-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadimkorr%2Fsvelte-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadimkorr%2Fsvelte-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadimkorr%2Fsvelte-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vadimkorr","download_url":"https://codeload.github.com/vadimkorr/svelte-carousel/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254501555,"owners_count":22081528,"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","carousel-component","svelte","svelte-carousel","sveltejs","sveltejs-language"],"created_at":"2024-09-24T13:30:06.881Z","updated_at":"2025-05-16T09:03:04.710Z","avatar_url":"https://github.com/vadimkorr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![svelte-carousel](./docs/svelte-carousel-logo-md.png)\n\n\n# svelte-carousel\n\n\u003cdiv align=\"left\"\u003e\n\n[![npm](https://img.shields.io/npm/v/svelte-carousel.svg)](https://www.npmjs.com/package/svelte-carousel) [![npm](https://img.shields.io/npm/dm/svelte-carousel.svg)](https://www.npmjs.com/package/svelte-carousel)\n\u003cbr /\u003e\n[![GitHub repo](https://img.shields.io/badge/github-repo-green.svg?style=flat)](https://github.com/vadimkorr/svelte-carousel) [![GitHub followers](https://img.shields.io/github/followers/vadimkorr.svg?style=social\u0026label=Follow)](https://github.com/vadimkorr)\n\n\u003c/div\u003e\n\nThe awesome carousel component for Svelte 3\n\n## Demo\n* [vadimkorr.github.io/svelte-carousel](https://vadimkorr.github.io/svelte-carousel)\n* [REPL](https://svelte.dev/repl/f503a458832f4a358d9ec00f88945ff5)\n\n## Installation\n```bash\nyarn add svelte-carousel\n```\n```bash\nnpm install svelte-carousel\n```\n\nImport component\n```jsx\n\u003cscript\u003e\n  import Carousel from 'svelte-carousel'\n  // ...\n\u003c/script\u003e\n```\n\n## SvelteKit support\nThere are several things to keep in mind when `svelte-carousel` is used with SvelteKit. This is because `svelte-carousel` is a client-side library and depends on `document` and `window`. [See more in SvelteKit FAQ](https://kit.svelte.dev/faq).\n\n1. Install `svelte-carousel` as a dev dependency. [Why as a dev dependency?](https://github.com/sveltejs/sapper-template#using-external-components)\n\n```bash\nyarn add svelte-carousel -D\n```\n```bash\nnpm install svelte-carousel -D\n```\n\n2. Extend `kit` in `svelte.config.js` to include the `vite` property\n\n```js\nconst config = {\n  // existing props\n  kit: {\n    // existing props\n    vite: {\n      optimizeDeps: {\n        include: ['lodash.get', 'lodash.isequal', 'lodash.clonedeep']\n      }\n      // plugins: []\n    }\n  }\n}\n```\n\n3. Import and use it:\n\n```jsx\n\n\u003cscript\u003e\n  import Carousel from 'svelte-carousel';\n  import { browser } from '$app/environment';\n\n  let carousel; // for calling methods of the carousel instance\n  \n  const handleNextClick = () =\u003e {\n    carousel.goToNext()\n  }\n\u003c/script\u003e\n\n{#if browser}\n  \u003cCarousel\n    bind:this={carousel}\n  \u003e\n    \u003cdiv\u003e1\u003c/div\u003e\n    \u003cdiv\u003e2\u003c/div\u003e\n    \u003cdiv\u003e3\u003c/div\u003e\n  \u003c/Carousel\u003e\n{/if}\n\n\u003cbutton on:click={handleNextClick}\u003eNext\u003c/button\u003e\n```\n\n## Vite support\n1. Extend `optimizeDeps.include` in `vite.config.js`\n\n```js\nexport default defineConfig({\n  optimizeDeps: {\n    include: ['lodash.get', 'lodash.isequal', 'lodash.clonedeep']\n  }\n})\n```\n\n2. Import and use it:\n\n```jsx\n\n\u003cscript\u003e\n  import Carousel from 'svelte-carousel'\n\n  let carousel; // for calling methods of the carousel instance\n  const handleNextClick = () =\u003e {\n    carousel.goToNext()\n  }\n\u003c/script\u003e\n\n\u003cCarousel\n  bind:this={carousel}\n\u003e\n  \u003cdiv\u003e1\u003c/div\u003e\n  \u003cdiv\u003e2\u003c/div\u003e\n  \u003cdiv\u003e3\u003c/div\u003e\n\u003c/Carousel\u003e\n\n\u003cbutton on:click={handleNextClick}\u003eNext\u003c/button\u003e\n```\n\n## Props\n| Prop                      | Type       | Default         | Description                                   | \n|---------------------------|------------|-----------------|-----------------------------------------------|\n| `arrows`                  | `boolean`  | `true`          | Enables next/prev arrows                      |\n| `infinite`                | `boolean`  | `true`          | Infinite looping                              |\n| `initialPageIndex`        | `number`   | `0`             | Page to start on                              |\n| `duration`                | `number`   | `500`           | Transition duration (ms)                      |\n| `autoplay`                | `boolean`  | `false`         | Enables autoplay of pages                     |\n| `autoplayDuration`        | `number`   | `3000`          | Autoplay change interval (ms)                 |\n| `autoplayDirection`       | `string`   | `'next'`        | Autoplay change direction (`next` or `prev`)  |\n| `pauseOnFocus`            | `boolean`  | `false`         | Pauses autoplay on focus (for touchable devices - tap the carousel to toggle the autoplay, for non-touchable devices - hover over the carousel to pause the autoplay) |\n| `autoplayProgressVisible` | `boolean`  | `false`         | Shows autoplay duration progress indicator    |\n| `dots`                    | `boolean`  | `true`          | Current page indicator dots                   |\n| `timingFunction`          | `string`   | `'ease-in-out'` | CSS animation timing function                 |\n| `swiping`                 | `boolean`  | `true`          | Enables swiping                               |\n| `particlesToShow`         | `number`   | `1`             | Number of elements to show                    |\n| `particlesToScroll`       | `number`   | `1`             | Number of elements to scroll                  |\n\n## Events\n\n### `pageChange`\nIt is dispatched on page change\n\n| Payload field      | Type        | Description                           | \n|--------------------|-------------|---------------------------------------|\n| `event.detail`     | `number`    | Current page index                    |\n\n```jsx\n\u003cCarousel\n  on:pageChange={\n    event =\u003e console.log(`Current page index: ${event.detail}`)\n  }\n\u003e\n  \u003c!-- --\u003e\n\u003c/Carousel\u003e\n```\n\n## Slots\n\n### `prev` and `next`\nThey are used for customizing prev and next buttons.\n\nSlot props:\n\n| Prop               | Type        | Description                           | \n|--------------------|-------------|---------------------------------------|\n| `showPrevPage`     | `function`  | Call it to switch to the previos page |\n| `showNextPage`     | `function`  | Call it to switch to the next page    |\n\n```jsx\n\u003cCarousel\n  let:showPrevPage\n  let:showNextPage\n\u003e\n  \u003cdiv slot=\"prev\"\u003e\n    \u003c!-- --\u003e\n  \u003c/div\u003e\n  \u003cdiv slot=\"next\"\u003e\n    \u003c!-- --\u003e\n  \u003c/div\u003e\n  \u003c!-- --\u003e\n\u003c/Carousel\u003e\n```\n\n### `dots`\nThis slot is used for customizing how dots look like.\n\nSlot props:\n\n| Prop                | Type         | Description                                  | \n|---------------------|--------------|----------------------------------------------|\n| `currentPageIndex`  | `number`     | Represents current page index (start from 0) |\n| `pagesCount`        | `number`     | Total pages amount                           |\n| `showPage`          | `function`   | Takes index as page to be shown              |\n\n```jsx\n\u003cCarousel\n  let:currentPageIndex\n  let:pagesCount\n  let:showPage\n\u003e\n  \u003cdiv slot=\"dots\"\u003e\n    \u003c!-- --\u003e\n  \u003c/div\u003e\n  \u003c!-- --\u003e\n\u003c/Carousel\u003e\n```\n\n### Default slot\nThis slot takes content for the carousel.\n\nSlot props:\n\n| Prop               | Type       | Description                                                          | \n|--------------------|------------|----------------------------------------------------------------------|\n| `loaded`           | `number[]` | Contains indexes of pages to be loaded. Can be used for lazy loading |\n| `currentPageIndex` | `number`   | Represents current page index (start from 0)                         |\n\n```jsx\n\u003cCarousel\n  let:loaded\n\u003e\n  \u003cdiv\u003e\n    \u003c!-- --\u003e\n  \u003c/div\u003e\n  \u003c!-- --\u003e\n\u003c/Carousel\u003e\n```\n\n## Methods\n\n### `goTo`\nNavigates to a page by index. `(pageIndex, options) =\u003e Promise\u003cvoid\u003e`.\n\nArguments:\n\n| Argument           | Type        | Default | Description                           | \n|--------------------|-------------|---------|---------------------------------------|\n| `pageIndex`        | `number`    |         | Page number                           |\n| `options.animated` | `boolean`   | `true`  | Should it be animated or not          |\n\n```jsx\n\u003cscript\u003e\n  // ...\n  let carousel;\n  function goToStartPage() {\n    carousel.goTo(0, { animated: false })\n  }\n\u003c/script\u003e\n\n\u003cCarousel\n  bind:this={carousel}\n\u003e\n  \u003c!--  --\u003e\n\u003c/Carousel\u003e\n\u003cbutton class=\"button\" on:click={goToStartPage}\u003eGo\u003c/button\u003e\n```\n\n### `goToPrev`\nNavigates to the previous page. `(options) =\u003e Promise\u003cvoid\u003e`.\n\nArguments:\n\n| Argument           | Type        | Default | Description                   | \n|--------------------|-------------|---------|-------------------------------|\n| `options.animated` | `boolean`   | `true`  | Should it be animated or not  |\n\n```jsx\n\u003cscript\u003e\n  // ...\n  let carousel;\n  function goToPrevPage() {\n    carousel.goToPrev({ animated: false })\n  }\n\u003c/script\u003e\n\n\u003cCarousel\n  bind:this={carousel}\n\u003e\n  \u003c!--  --\u003e\n\u003c/Carousel\u003e\n\u003cbutton class=\"button\" on:click={goToPrevPage}\u003eGo\u003c/button\u003e\n```\n\n### `goToNext`\nNavigates to the next page. `(options) =\u003e Promise\u003cvoid\u003e`.\n\nArguments:\n\n| Argument           | Type        | Default | Description                  | \n|--------------------|-------------|---------|------------------------------|\n| `options.animated` | `boolean`   | `true`  | Should it be animated or not |\n\n```jsx\n\u003cscript\u003e\n  // ...\n  let carousel;\n  function goToNextPage() {\n    carousel.goToNext({ animated: false })\n  }\n\u003c/script\u003e\n\n\u003cCarousel\n  bind:this={carousel}\n\u003e\n  \u003c!--  --\u003e\n\u003c/Carousel\u003e\n\u003cbutton class=\"button\" on:click={goToNextPage}\u003eGo\u003c/button\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvadimkorr%2Fsvelte-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvadimkorr%2Fsvelte-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvadimkorr%2Fsvelte-carousel/lists"}