{"id":13604250,"url":"https://github.com/beyonk-group/svelte-carousel","last_synced_at":"2025-04-11T23:32:02.054Z","repository":{"id":34024539,"uuid":"146486679","full_name":"beyonk-group/svelte-carousel","owner":"beyonk-group","description":"A super lightweight, super simple Carousel for Svelte 3","archived":true,"fork":false,"pushed_at":"2022-05-05T10:16:15.000Z","size":377,"stargazers_count":213,"open_issues_count":23,"forks_count":39,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-04-13T18:11:45.099Z","etag":null,"topics":["beyonk","carousel","javascript","siema","slide","slider","svelte","svelte-components","svelte-v3","vanilla-js"],"latest_commit_sha":null,"homepage":"","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/beyonk-group.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}},"created_at":"2018-08-28T18:03:26.000Z","updated_at":"2024-03-26T23:37:01.000Z","dependencies_parsed_at":"2022-08-08T11:30:19.076Z","dependency_job_id":null,"html_url":"https://github.com/beyonk-group/svelte-carousel","commit_stats":null,"previous_names":["beyonk-group/svelte-carousel","beyonk-adventures/svelte-carousel"],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyonk-group%2Fsvelte-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyonk-group%2Fsvelte-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyonk-group%2Fsvelte-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyonk-group%2Fsvelte-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beyonk-group","download_url":"https://codeload.github.com/beyonk-group/svelte-carousel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248495064,"owners_count":21113561,"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":["beyonk","carousel","javascript","siema","slide","slider","svelte","svelte-components","svelte-v3","vanilla-js"],"created_at":"2024-08-01T19:00:42.224Z","updated_at":"2025-04-11T23:32:01.299Z","avatar_url":"https://github.com/beyonk-group.png","language":"Svelte","funding_links":[],"categories":["UI Componentes"],"sub_categories":["Comunidade Global"],"readme":"## This project is now archived. We don't use carousels any more, [and](https://powerdigitalmarketing.com/blog/why-you-should-not-use-a-carousel-on-your-website/#gref) [you](https://www.impactplus.com/blog/why-homepage-carousels-are-bad#:~:text=Carousels%20may%20seem%20flashy%20and,reflects%20badly%20on%20your%20brand.) [shouldn't](https://thegood.com/insights/ecommerce-image-carousels/) [either](https://cxl.com/blog/dont-use-automatic-image-sliders-or-carousels/).\n\n\u003ca href=\"https://beyonk.com\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/218949/144224348-1b3a20d5-d68e-4a7a-b6ac-6946f19f4a86.png\" width=\"198\" /\u003e\n\u003c/a\u003e\n\n## Svelte Carousel\n\n[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com) [![CircleCI](https://circleci.com/gh/beyonk-adventures/svelte-carousel.svg?style=shield)](https://circleci.com/gh/beyonk-adventures/svelte-carousel) [![svelte-v2](https://img.shields.io/badge/svelte-v2-orange.svg)](https://v2.svelte.dev) [![svelte-v3](https://img.shields.io/badge/svelte-v3-blueviolet.svg)](https://svelte.dev)\n\nSvelte Carousel / Slider\n\nThis is a ground-up rewrite of the original Svelte Carousel/Slider using Svelte v3, and [Siema](https://github.com/pawelgrzybek/siema), the goal being a fully working carousel with a tiny size.\n\n## Usage\n\nThis library is pure javascript, so can be used with any framework you like.\n\n### Demo\n\nThe [simplest possible demo](https://svelte.dev/repl/3953567d530b41d087ab7eaa8e7e632a?version=3.22.3)\n\n```\nnpm install\nnpm run dev # http://localhost:12001\n```\n\n### To use within a Svelte application:\n\n```bash\nnpm i -D @beyonk/svelte-carousel\n```\n\n## Usage\n\n```jsx\n\u003cCarousel\u003e\n  \u003cdiv class=\"slide-content\"\u003eSlide 1\u003c/div\u003e\n  \u003cdiv class=\"slide-content\"\u003eSlide 2\u003c/div\u003e\n  \u003cdiv class=\"slide-content\"\u003eSlide 3\u003c/div\u003e\n  \u003cdiv class=\"slide-content\"\u003eSlide 4\u003c/div\u003e\n\u003c/Carousel\u003e\n\n\u003cscript\u003e\n\timport Carousel from '@beyonk/svelte-carousel'\n\timport { ChevronLeftIcon, ChevronRightIcon } from 'svelte-feather-icons'\n\u003c/script\u003e\n```\n\n### Options\n\n#### Controls\n\nYou can set the controls to be anything you like, though the default height and width are set to 40px. Just use the slots available to insert your own content.\n\n```bash\nnpm i -D svelte-feather-icons\n```\n\n```jsx\n\u003cCarousel\u003e\n  \u003cspan class=\"control\" slot=\"left-control\"\u003e\n    \u003cChevronLeftIcon /\u003e\n  \u003c/span\u003e\n  \u003cdiv class=\"slide-content\"\u003eSlide 1\u003c/div\u003e\n  ...\n  \u003cdiv class=\"slide-content\"\u003eSlide n\u003c/div\u003e\n  \u003cspan class=\"control\" slot=\"right-control\"\u003e\n    \u003cChevronRightIcon /\u003e\n  \u003c/span\u003e\n\u003c/Carousel\u003e\n\n\u003cscript\u003e\n\timport Carousel from './Carousel.svelte'\n\timport { ChevronLeftIcon, ChevronRightIcon } from 'svelte-feather-icons'\n\u003c/script\u003e\n```\n\nIf you need to override height and width, you can use CSS:\n\n```css\n\t.control :global(svg) {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tcolor: #fff;\n\t\tborder: 2px solid #fff;\n\t\tborder-radius: 32px;\n\t}\n```\n\n#### Attributes\n\nYou can pass the following attributes:\n\n| Attribute | Type    | Default Value | Description                                                                                                                  |\n|-----------|---------|---------------|------------------------------------------------------------------------------------------------------------------------------|\n| loop      | boolean | true          | At the end of the carousel, loop through to the first slide again, seamlessly                                                |\n| perPage   | integer | 3             | Number of slides on a single page. Note that this needs to be less than or equal to the number of slides in your carousel |\n| autoplay  | integer | 0             | Auto-change slide at an interval (in milliseconds). 0 means don't autoplay.                                                  |\n| duration  | number  | 200           | Slide transition duration in milliseconds.                                                \t\t\t\t    |\n| easing    | string  | 'ease-out'    | It is like a CSS transition-timing-function — describes acceleration curve.                                                  |\n| startIndex | number | 0\t      | Index (zero-based) of the starting slide.                                                 \t\t\t\t     |\n| draggable | boolean | true\t      | Use dragging and touch swiping.                                                 \t\t\t\t       |\n| multipleDrag | boolean | true\t      | Allow dragging to move multiple slides.                                                 \t\t\t\t     |\n| dots | boolean | true\t      | Toggles visibility of slider dots.\n| controls | boolean | true\t      | Toggles visibility of slider controls. dots.                                                 \t\t\t\t  \t       |\n| threshold | number | 20\t      | Touch and mouse dragging threshold (in px).                                                 \t\t\t\t     |\n| rtl | boolean | false\t      | Enables layout for languages written from right to left (like Hebrew or Arabic).                                                |\n\nperPage can also be set to a responsive object, to change the number of slides based on screen width:\n\n```jsx\n\u003cCarousel perPage={{ 800: 3, 500: 2 }}\u003e\n// will show 1 slide below 500px width, 2 at 500, 3 at 800.\n```\n\n### Events\n\nThe Carousel components emits the following events:\n\n| Name     | Data                           | Description                                                                    |\n|----------|--------------------------------|--------------------------------------------------------------------------------|\n| `change` | `{ currentSlide, slideCount }` | `currentSlide`: The current slide index. Can be a positive or negative integer. `slideCount`: The number of slides. |\n\n\n### Actions\n\n  You can call left, right, go(slideNumber), pause and resume functions on the slider. For example, for pausing the autoslide while the mouse is hover the carousel \n  \n  ```jsx\n\u003cCarousel bind:this={carousel} on:mouseenter={enter} on:mouseleave={leave}\u003e\n  \u003cdiv class=\"slide-content\"\u003eSlide 1\u003c/div\u003e\n  ...\n  \u003cdiv class=\"slide-content\"\u003eSlide n\u003c/div\u003e\n\u003c/Carousel\u003e\n\n\u003cscript\u003e\n  import Carousel from './Carousel.svelte'\n  let carousel;\n  \n  function enter() {\n    carousel.pause();\n  }\n  \n  function leave() {\n    carousel.resume();\n  }\n\u003c/script\u003e\n```\n\n  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeyonk-group%2Fsvelte-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeyonk-group%2Fsvelte-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeyonk-group%2Fsvelte-carousel/lists"}