{"id":16498697,"url":"https://github.com/kagol/vue-carousel","last_synced_at":"2025-07-29T15:35:27.443Z","repository":{"id":50676789,"uuid":"452748192","full_name":"kagol/vue-carousel","owner":"kagol","description":"一个简单、灵活的 Vue3 走马灯组件，非常轻量，只有 5kB。","archived":false,"fork":false,"pushed_at":"2024-05-10T23:42:56.000Z","size":60606,"stargazers_count":17,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-16T05:06:06.688Z","etag":null,"topics":["carousel","component-library","composition-api","devui","vue","vue3"],"latest_commit_sha":null,"homepage":"https://kagol.github.io/vue-carousel","language":"TypeScript","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/kagol.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":"2022-01-27T16:00:01.000Z","updated_at":"2025-05-21T08:46:59.000Z","dependencies_parsed_at":"2024-04-28T13:55:41.501Z","dependency_job_id":null,"html_url":"https://github.com/kagol/vue-carousel","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/kagol/vue-carousel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kagol%2Fvue-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kagol%2Fvue-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kagol%2Fvue-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kagol%2Fvue-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kagol","download_url":"https://codeload.github.com/kagol/vue-carousel/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kagol%2Fvue-carousel/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267709622,"owners_count":24131922,"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","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["carousel","component-library","composition-api","devui","vue","vue3"],"created_at":"2024-10-11T14:49:48.285Z","updated_at":"2025-07-29T15:35:27.400Z","avatar_url":"https://github.com/kagol.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Carousel\n\n一个简单、灵活的`Vue3`走马灯组件，非常轻量，只有`5kB`。\n\n预览地址：\n[https://kagol.github.io/vue-carousel/](https://kagol.github.io/vue-carousel/)\n\n## 快速开始\n\n创建一个vite工程：\n\n```\nnpm create vite vite-demo --template vue-ts\n```\n\n安装`Carousel`：\n```\nnpm install @kagol/vue-carousel\n```\n\n在`main.ts`中引入`Carousel`：\n```\nimport Carousel from '@kagol/vue-carousel'\nimport '@kagol/vue-carousel/dist/style.css'\n\ncreateApp(App)\n.use(Carousel)\n.mount('#app')\n```\n\n在`App.vue`中使用：\n\n```\n\u003cCarousel\u003e\n  \u003cdiv class=\"carousel-item\"\u003epage 1\u003c/div\u003e\n  \u003cdiv class=\"carousel-item\"\u003epage 2\u003c/div\u003e\n  \u003cdiv class=\"carousel-item\"\u003epage 3\u003c/div\u003e\n\u003c/Carousel\u003e\n```\n\n## 效果动图\n\n默认效果：\n\n![1-default.gif](https://pic.imgdb.cn/item/61f2b4932ab3f51d9107f30c.gif)\n\n掘金活动：\n\n![2-juejin.gif](https://pic.imgdb.cn/item/61f2b4932ab3f51d9107f315.gif)\n\n指示器位置：\n\n![3-indicator-position.gif](https://pic.imgdb.cn/item/61f2b4932ab3f51d9107f31c.gif)\n\n自定义指示器：\n\n![4-custom-indicator.gif](https://pic.imgdb.cn/item/61f2b4932ab3f51d9107f325.gif)\n\n分页器位置：\n\n![5-pagination-position.gif](https://pic.imgdb.cn/item/61f2b4932ab3f51d9107f32f.gif)\n\n自定义分页器：\n\n![6-custom-pagination.gif](https://pic.imgdb.cn/item/61f2b5282ab3f51d9108b5ef.gif)\n\n华为官网：\n\n![7-huawei.gif](https://pic.imgdb.cn/item/61f2b7bb2ab3f51d910d4651.gif)\n\nQQ音乐：\n\n![8-qqmusic.gif](https://pic.imgdb.cn/item/61f2bb5d2ab3f51d91146170.gif)\n\nB站：\n\n![9-bilibili.gif](https://pic.imgdb.cn/item/61f2b85e2ab3f51d910e65ab.gif)\n\n手风琴式折叠卡片：\n\n![10-collapse-card.gif](https://pic.imgdb.cn/item/61f2b6f42ab3f51d910bc018.gif)\n\n## API\n\n### Carousel 组件\n\nprops\n\n| 属性    | 类型   | 默认 | 说明           |\n| ------- | ------ | ---- | -------------- |\n| v-model | Number | 1    | 可选，当前页码 |\n| autoplay | Boolean | true    | 可选，是否自动播放 |\n| interval | Number | 3000    | 可选，自动播放的时间间隔，单位是毫秒 |\n\n插槽\n\n| 属性    | 类型   | 默认 | 说明           |\n| ------- | ------ | ---- | -------------- |\n| default | -- | --    | 必选，默认插槽 |\n| indicator | -- | --    | 可选，指示器插槽 |\n| pagination | -- | --    | 可选，分页器插槽 |\n\n### CarouselIndicator 组件\n\nprops\n\n| 属性    | 类型   | 默认 | 说明           |\n| ------- | ------ | ---- | -------------- |\n| v-model | Number | 1    | 可选，当前页码 |\n| count | Number | --    | 可选，指示器元素数量 |\n\n插槽\n\n| 属性    | 类型   | 默认 | 说明           |\n| ------- | ------ | ---- | -------------- |\n| default | ({ pageIndex, setPageIndex }) =\u003e {} | --    | 可选，默认插槽 |\n\n### CarouselPrev 组件\n\n插槽\n\n| 属性    | 类型   | 默认 | 说明           |\n| ------- | ------ | ---- | -------------- |\n| default | -- | --    | 可选，默认插槽 |\n\n### CarouselNext 组件\n\n插槽\n\n| 属性    | 类型   | 默认 | 说明           |\n| ------- | ------ | ---- | -------------- |\n| default | -- | --    | 可选，默认插槽 |\n\n参考：\n\n[用积木理论设计的Carousel组件都有哪些有趣的玩法？](https://juejin.cn/post/7056193763810476063/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkagol%2Fvue-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkagol%2Fvue-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkagol%2Fvue-carousel/lists"}