{"id":27834487,"url":"https://github.com/warpcgd/vue-slider","last_synced_at":"2025-05-02T13:01:05.470Z","repository":{"id":39547086,"uuid":"65403965","full_name":"warpcgd/vue-concise-slider","owner":"warpcgd","description":"vue-concise-slider,A simple vue sliding component","archived":false,"fork":false,"pushed_at":"2022-12-09T20:25:27.000Z","size":6892,"stargazers_count":921,"open_issues_count":52,"forks_count":185,"subscribers_count":29,"default_branch":"master","last_synced_at":"2025-04-28T18:02:05.556Z","etag":null,"topics":["slide","slider","vue","vue-concise-slider","vue-slider"],"latest_commit_sha":null,"homepage":"https://warpcgd.github.io/vue-concise-slider/#/","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/warpcgd.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}},"created_at":"2016-08-10T17:47:17.000Z","updated_at":"2025-03-21T06:08:40.000Z","dependencies_parsed_at":"2023-01-25T23:31:25.712Z","dependency_job_id":null,"html_url":"https://github.com/warpcgd/vue-concise-slider","commit_stats":null,"previous_names":["warpcgd/vue-slider"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warpcgd%2Fvue-concise-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warpcgd%2Fvue-concise-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warpcgd%2Fvue-concise-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warpcgd%2Fvue-concise-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/warpcgd","download_url":"https://codeload.github.com/warpcgd/vue-concise-slider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252043563,"owners_count":21685464,"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":["slide","slider","vue","vue-concise-slider","vue-slider"],"created_at":"2025-05-02T13:00:39.005Z","updated_at":"2025-05-02T13:01:05.381Z","avatar_url":"https://github.com/warpcgd.png","language":"Vue","funding_links":[],"categories":["UI组件"],"sub_categories":[],"readme":"中文 | [English](https://github.com/warpcgd/vue-concise-slider/blob/master/README_EN.md)\n\n## vue-concise-slider\n\n[![npm](https://img.shields.io/npm/v/vue-concise-slider.svg)](https://www.npmjs.com/package/vue-concise-slider)\n[![npm](https://img.shields.io/npm/dw/vue-concise-slider.svg)](https://www.npmjs.com/package/vue-concise-slider)\n[![npm](https://img.shields.io/github/size/warpcgd/vue-concise-slider/dist/module.js.svg)](https://www.npmjs.com/package/vue-concise-slider)\n\n![](vue-slider-github.jpg)\n* * *\nvue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和PC端\n\n## 版本\n[v3.3.6](https://github.com/warpcgd/vue-concise-slider/issues/29) 支持vue2.0+\n\n[v4.0.0](https://github.com/warpcgd/vue-concise-slider/issues/29) beta版本\n\n## 特点\n* 简单配置\n* 轻量 (~35kB gzipped)\n* 多种滑动样式\n\n### 目前已实现\n- [x] 全屏自适应\n- [x] 移动端兼容\n- [x] 垂直滚动\n- [x] 定时自动切换\n- [x] 不定宽度滚动\n- [x] 无缝循环滚动\n- [x] 多级滚动\n- [x] 渐变滚动\n- [x] 旋转滚动\n- [x] page中加入自定义组件\n- [x] 使用slot替代page\n- [x] 自定义分页\n- [x] 居中滑动\n- [x] 新的coverflow\n- [x] 层级嵌套slider\n### 未来将实现\n- [ ] 虚拟slider\n\n### 链接\n\n- [文档](https://warpcgd.github.io/vue-concise-slider/docs.html)\n\n- [demo](https://warpcgd.github.io/vue-concise-slider/demos/)\n\n### 安装\n\n```html\n  npm install vue-concise-slider --save\n```\n\n### 如何使用\n\n```html\n\u003ctemplate\u003e\n\u003c!-- 制作一个框架包裹slider --\u003e\n \u003cdiv style=\"width:70%;margin:20px auto;height:400px\"\u003e\n      \u003c!-- 配置slider组件 --\u003e\n      \u003cslider ref=\"slider\" :options=\"options\" @slide='slide' @tap='onTap' @init='onInit'\u003e\n          \u003c!-- 直接使用slideritem slot --\u003e\n           \u003cslideritem v-for=\"(item,index) in someList\" :key=\"index\" :style=\"item.style\"\u003e{{item.html}}\u003c/slideritem\u003e\n          \u003c!-- 设置loading,可自定义 --\u003e\n          \u003cdiv slot=\"loading\"\u003eloading...\u003c/div\u003e\n      \u003c/slider\u003e\n \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nimport { slider, slideritem } from 'vue-concise-slider'// import slider components\nexport default {\n   el: '#app',\n   data () {\n      return {\n        //Image list\n        someList:[],\n        //Sliding configuration [obj]\n        options: {\n          currentPage: 0,\n          thresholdDistance:500,\n          thresholdTime:100,\n          autoplay:1000,\n          loop:true,\n          direction:'vertical',\n          loopedSlides:1,\n          slidesToScroll:1,\n          timingFunction: 'ease',\n          speed: 300\n        }\n      }\n    },\n    components: {\n      slider,\n      slideritem\n    },\n    mounted () {\n      let that = this\n      setTimeout(function () {\n        that.someList = [\n          {\n            html: 'slide1',\n            style: {\n              'background': '#1bbc9b'\n            }\n          },\n          {\n            html: 'slide2',\n            style: {\n              'background': '#4bbfc3'\n            }\n          },\n          {\n            html: 'slide3',\n            style: {\n              'background': '#7baabe'\n            }\n          }\n        ]\n      }, 2000)\n    },\n    methods: {\n      // Listener event\n      slide (data) {\n        console.log(data)\n      },\n      onTap (data) {\n        console.log(data)\n      },\n      onInit (data) {\n        console.log(data)\n      }\n    }\n}\n\u003c/script\u003e\n```\n\n## 浏览器支持\n\n现代浏览器及ie10+\n\n\n## 贡献\n\n- Fork it!\n- Create your feature branch: `git checkout -b my-new-feature`\n- Commit your changes: `git commit -am 'Add some feature'`\n- Push to the branch: `git push origin my-new-feature`\n- Submit a pull request\n\n\n\n### 有更好的想法？\n欢迎来留下你的意见:https://github.com/warpcgd/vue-concise-slider/issues/1\n\n### BUG？oh no!\n可以在这里提交,会尽快处理:https://github.com/warpcgd/vue-concise-slider/issues/2\n\n### 反馈\nwechat: warpcgd\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwarpcgd%2Fvue-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwarpcgd%2Fvue-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwarpcgd%2Fvue-slider/lists"}