{"id":13535930,"url":"https://github.com/shiye515/vue-m-carousel","last_synced_at":"2025-06-15T17:12:02.150Z","repository":{"id":79026918,"uuid":"62610332","full_name":"shiye515/vue-m-carousel","owner":"shiye515","description":"vue 移动端轮播组件","archived":false,"fork":false,"pushed_at":"2017-08-31T09:43:06.000Z","size":411,"stargazers_count":54,"open_issues_count":3,"forks_count":14,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-31T00:23:22.852Z","etag":null,"topics":["carousel","mobile-first","vue"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/shiye515.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}},"created_at":"2016-07-05T06:07:58.000Z","updated_at":"2024-09-08T02:56:33.000Z","dependencies_parsed_at":"2024-01-17T22:14:07.575Z","dependency_job_id":"3011a63b-2517-423c-b0ec-c11ec179298e","html_url":"https://github.com/shiye515/vue-m-carousel","commit_stats":{"total_commits":26,"total_committers":1,"mean_commits":26.0,"dds":0.0,"last_synced_commit":"1a4b17f800e4f29c568c66b3066f7996eaaece91"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shiye515%2Fvue-m-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shiye515%2Fvue-m-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shiye515%2Fvue-m-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shiye515%2Fvue-m-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shiye515","download_url":"https://codeload.github.com/shiye515/vue-m-carousel/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shiye515%2Fvue-m-carousel/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259118822,"owners_count":22808062,"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","mobile-first","vue"],"created_at":"2024-08-01T09:00:32.234Z","updated_at":"2025-06-15T17:12:02.084Z","avatar_url":"https://github.com/shiye515.png","language":"JavaScript","funding_links":[],"categories":["UI组件","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Awesome Vue.js"],"sub_categories":["Libraries \u0026 Plugins"],"readme":"# vue-m-carousel\nvue 移动端轮播组件 [live demo](https://shiye515.github.io/vue-m-carousel/)\n\n[1.0 branch](https://github.com/shiye515/vue-m-carousel/tree/1.0)\n\n[![NPM version][npm-image]][npm-url]\n[![npm download][download-image]][download-url]\n\n[npm-image]: http://img.shields.io/npm/v/vue-m-carousel.svg?style=flat-square\n[npm-url]: http://npmjs.org/package/vue-m-carousel\n[download-image]: https://img.shields.io/npm/dm/vue-m-carousel.svg?style=flat-square\n[download-url]: https://npmjs.org/package/vue-m-carousel\n\n##简介（Intro）\n\n- 移动端高性能轮播组件，体积只有 8.82 kB\n- 除了vue之外不依赖其他库\n- 动画通过 transform 和 translate 实现，布局通过flex实现\n- 支持响应式布局，也支持固定布局\n- 提供动画结束的回调\n\n## install\n\n[![vue-m-carousel](https://nodei.co/npm/vue-m-carousel.png)](https://npmjs.org/package/vue-m-carousel)\n\n`npm install vue-m-carousel`\n\n## 用法\n```html\n    \u003ccarousel :indicators=\"true\" :auto=\"3000\"\u003e\n        \u003cdiv v-for=\"i in 3\"\u003ecarousel-item-{{i-1}}\u003c/div\u003e\n    \u003c/carousel\u003e\n```\n\n```javascript\nimport Carousel from 'vue-m-carousel'\nexport default {\n    components: {\n        Carousel\n    }\n}\n```\n\n## API（跟1.0版本一致）\n\n### props\n\n\u003ctable class=\"table table-bordered table-striped\"\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n        \u003cth style=\"width: 100px;\"\u003ename\u003c/th\u003e\n        \u003cth style=\"width: 50px;\"\u003etype\u003c/th\u003e\n        \u003cth style=\"width: 50px;\"\u003edefault\u003c/th\u003e\n        \u003cth\u003edescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eloop\u003c/td\u003e\n          \u003ctd\u003eBoolean\u003c/td\u003e\n          \u003ctd\u003etrue\u003c/td\u003e\n          \u003ctd\u003e是否循环播放\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eauto\u003c/td\u003e\n          \u003ctd\u003eNumber\u003c/td\u003e\n          \u003ctd\u003e3000\u003c/td\u003e\n          \u003ctd\u003e是否自动播放，0不自动播放，其他值则自动播放，值为其自动播放的interval\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eindicators\u003c/td\u003e\n          \u003ctd\u003eBoolean\u003c/td\u003e\n          \u003ctd\u003efalse\u003c/td\u003e\n          \u003ctd\u003e是否添加屏点，不带任何样式，样式可参考demo写\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eresponsive\u003c/td\u003e\n          \u003ctd\u003eNumber\u003c/td\u003e\n          \u003ctd\u003e40\u003c/td\u003e\n          \u003ctd\u003e是否开启响应式高度，若为0则不开启，其他正整数表示 高度是宽度的百分之多少\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eflickThreshold\u003c/td\u003e\n          \u003ctd\u003eNumber\u003c/td\u003e\n          \u003ctd\u003e0.6\u003c/td\u003e\n          \u003ctd\u003e轻弹的最小速度\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003edelta\u003c/td\u003e\n          \u003ctd\u003eNumber\u003c/td\u003e\n          \u003ctd\u003e100\u003c/td\u003e\n          \u003ctd\u003e滚动时触发滚动到下一张的最小值\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eonSlidEnd\u003c/td\u003e\n          \u003ctd\u003eFunction\u003c/td\u003e\n          \u003ctd\u003enoop\u003c/td\u003e\n          \u003ctd\u003e轮播切换完成时的回调\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003epreventDefault\u003c/td\u003e\n          \u003ctd\u003eBoolean\u003c/td\u003e\n          \u003ctd\u003efalse\u003c/td\u003e\n          \u003ctd\u003e取消touchmove事件的默认动作\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshiye515%2Fvue-m-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshiye515%2Fvue-m-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshiye515%2Fvue-m-carousel/lists"}