{"id":22220332,"url":"https://github.com/yvescoding/vuescroll-carousel","last_synced_at":"2026-01-06T13:14:28.770Z","repository":{"id":108178854,"uuid":"162434015","full_name":"YvesCoding/vuescroll-carousel","owner":"YvesCoding","description":"A carousel plugin based on vuescroll.","archived":false,"fork":false,"pushed_at":"2019-02-07T06:53:44.000Z","size":158,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-30T07:12:17.621Z","etag":null,"topics":["carousel","carousel-plugin","vuescroll","vuescroll-carousel"],"latest_commit_sha":null,"homepage":"https://vuescrolljs.yvescoding.org/demo/#carousel","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/YvesCoding.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2018-12-19T12:25:24.000Z","updated_at":"2020-02-14T09:14:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"bd28cc73-433b-424d-bb1d-9c2bfb416ee3","html_url":"https://github.com/YvesCoding/vuescroll-carousel","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YvesCoding%2Fvuescroll-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YvesCoding%2Fvuescroll-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YvesCoding%2Fvuescroll-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YvesCoding%2Fvuescroll-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/YvesCoding","download_url":"https://codeload.github.com/YvesCoding/vuescroll-carousel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245422921,"owners_count":20612725,"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-plugin","vuescroll","vuescroll-carousel"],"created_at":"2024-12-02T23:08:13.974Z","updated_at":"2026-01-06T13:14:28.729Z","avatar_url":"https://github.com/YvesCoding.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vuescroll-carousel\r\n\r\n\u003cp\u003e\r\n  \u003ca href=\"https://www.npmjs.com/package/vuescroll-carousel\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vuescroll-carousel.svg\" alt=\"Version\"\u003e\u003c/a\u003e  \r\n  \u003ca href=\"https://www.npmjs.com/package/vuescroll-carousel\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/vuescroll-carousel.svg\" alt=\"License\"\u003e\u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\n## Introduction\r\n\r\nvuescroll-carousel is a carousel plugin based on **^vuescroll@4.9.0**.\r\n\r\nIt seems like [`swiper`](https://github.com/nolimits4web/swiper). You can see the guide below.\r\n\r\n## Demo\r\n\r\n- [Live Demo](https://codepen.io/wangyi7099/pen/OrQoXK)\r\n\r\n- See the **Demo** fold of this repo.\r\n\r\n## Get Started\r\n\r\n1. You should install `Vue@2.x` , `vuescroll@4.9.0+` and `vuescroll-carousel` , and registry the plugins.\r\n\r\n```bash\r\n npm i vue vuescroll vuescroll-carousel -S\r\n```\r\n\r\n```javascript\r\nimport Vue from vue;\r\nimport vuescroll from vuescroll;\r\nimport vuescroll/dist/vuescroll.css;\r\n// import carousel plugin and its css file\r\nimport vuescrollCarousel from vuescroll-carousel;\r\nimport vuescroll-carousel/dist/index.css;\r\n\r\n// reigstry the plugin\r\n\r\nVue.use(vuescroll);\r\nVue.use(vuescrollCarousel);\r\n```\r\n\r\n2. Wrap the element and that's all.\r\n\r\n```html\r\n\u003cvuescroll-carousel\u003e\r\n  \u003cdiv v-for=\"i in 10\" :key=\"i\"\u003e{{i}}\u003c/div\u003e\r\n\u003c/vuescroll-carousel\u003e\r\n```\r\n\r\n## Props and Api\r\n\r\n### Props\r\n\r\n| PropName     | Default |                                                                               Description |\r\n| ------------ | :-----: | ----------------------------------------------------------------------------------------: |\r\n| type         |    h    | `h` or `v`. `h` means scrolling on horizontal direction and `v` is on vertical direction. |\r\n| loop         |  true   |                         Whether carousel is connected between the end and the end or not. |\r\n| autoPlay     |  true   |                                           whether play the carousel automatically or not. |\r\n| intervalTime |  1000   |                          Interval time of auto-play, only enable when autoPlay is enable. |\r\n| playSpeed    |   300   |                                                                               play speed. |\r\n| indicator    |  true   |                                                                     show indicator or not |\r\n| currentIndex |    1    |                                           the index of current active item, strat from 1. |\r\n\r\n## Api\r\n\r\n| Api Name |                           Description                            |                             Arguments |\r\n| -------- | :--------------------------------------------------------------: | ------------------------------------: |\r\n| refresh  | refresh the compoennt's status. All states will be recalculated. |                                     - |\r\n| goToPage |                    Go to the specified page.                     | (pageIndex: Number, animate: Boolean) |\r\n| prev     |                         go to pre page.                          |\r\n| next     |                         go to next page.                         |\r\n\r\n## Author\r\n\r\nWangYi7099(Yves Wang)\r\n\r\n## License\r\n\r\n**MIT**\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyvescoding%2Fvuescroll-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyvescoding%2Fvuescroll-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyvescoding%2Fvuescroll-carousel/lists"}