{"id":14973818,"url":"https://github.com/pspgbhu/vue-swipe-mobile","last_synced_at":"2026-03-08T21:35:00.333Z","repository":{"id":16460121,"uuid":"79986219","full_name":"pspgbhu/vue-swipe-mobile","owner":"pspgbhu","description":"😃  A siwpe (touch slider) component for Vue2","archived":false,"fork":false,"pushed_at":"2022-12-08T17:16:52.000Z","size":1493,"stargazers_count":97,"open_issues_count":13,"forks_count":25,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-10T08:46:43.928Z","etag":null,"topics":["c-swipe","c-swiper","slide","slider","swipe","swiper","vue","vue-swipe","vue-swiper"],"latest_commit_sha":null,"homepage":"","language":"Vue","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/pspgbhu.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":"2017-01-25T05:34:25.000Z","updated_at":"2024-07-24T02:07:06.000Z","dependencies_parsed_at":"2023-01-13T20:30:38.451Z","dependency_job_id":null,"html_url":"https://github.com/pspgbhu/vue-swipe-mobile","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pspgbhu%2Fvue-swipe-mobile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pspgbhu%2Fvue-swipe-mobile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pspgbhu%2Fvue-swipe-mobile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pspgbhu%2Fvue-swipe-mobile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pspgbhu","download_url":"https://codeload.github.com/pspgbhu/vue-swipe-mobile/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250507014,"owners_count":21441899,"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":["c-swipe","c-swiper","slide","slider","swipe","swiper","vue","vue-swipe","vue-swiper"],"created_at":"2024-09-24T13:49:27.599Z","updated_at":"2026-03-08T21:34:55.300Z","avatar_url":"https://github.com/pspgbhu.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"English | [简体中文](./README_CN.md)\n\n# c-swipe\n\n[![gzip](http://img.badgesize.io/https://unpkg.com/c-swipe/dist/swipe.js?compression=gzip\u0026style=flat-square)](https://unpkg.com/c-swipe/dist/swipe.js)\n[![npm package](https://img.shields.io/npm/v/c-swipe.svg?style=flat-square)](https://www.npmjs.org/package/c-swipe)\n[![NPM downloads](http://img.shields.io/npm/dm/c-swipe.svg?style=flat-square)](https://npmjs.org/package/c-swipe)\n[![GitHub issues](https://img.shields.io/github/issues/pspgbhu/vue-swipe-mobile.svg?style=flat-square)](https://github.com/pspgbhu/Vue2-C-Swipe-Mobile/issues)\n[![Travis](https://img.shields.io/travis/pspgbhu/vue-swipe-mobile/master.svg?style=flat-square)](https://github.com/pspgbhu/vue-swipe-mobile)\n\n[![NPM](https://nodei.co/npm/c-swipe.png)](https://nodei.co/npm/c-swipe/)\n\n\u003e A swipe (touch slide) component for Vue2.x in mobile device.\n\u003e Only support touch event now.\n\n![c-swipe](https://raw.githubusercontent.com/pspgbhu/pspgbhu.github.io/master/assets/img/cswipe-demo.gif)\n\n\n## Install\n`npm install c-swipe --save`\n\n## Usage\n\nregister components:\n\n```js\n// main.js\n\n// import c-swipe files into main.js\nimport 'c-swipe/dist/swipe.css';\nimport { Swipe, SwipeItem } from 'c-swipe';\n\n// global register components\nVue.component('swipe', Swipe);\nVue.component('swipe-item', SwipeItem);\n```\n\nUse in `.vue` files.\n\n```html\n\u003cswipe\n  v-model=\"index\"\n  style=\"text-align: center; line-height: 80px; height: 100px; background: #42b983;\"\n\u003e\n  \u003cswipe-item style=\"height: 100px; line-height: 100px\"\u003eitem1\u003c/swipe-item\u003e\n  \u003cswipe-item style=\"height: 100px; line-height: 100px\"\u003eitem2\u003c/swipe-item\u003e\n  \u003cswipe-item style=\"height: 100px; line-height: 100px\"\u003eitem3\u003c/swipe-item\u003e\n\u003c/swipe\u003e\n```\n\n```js\nnew Vue({\n  data: function () {\n    return {\n      index: 0, // two way\n    };\n  },\n});\n```\n\n*Or, you want import it by html tag*\n```html\n\u003clink href=\"https://unpkg.com/c-swipe/dist/swipe.css\" rel=\"stylesheet\"\u003e\u003c/head\u003e\n\u003cscript type=\"text/javascript\" src=\"https://unpkg.com/c-swipe/dist/swipe.js\"\u003e\u003c/script\u003e\n```\n```js\nvar vueSwipe = swipe.Swipe;\nvar vueSwipeItem = swipe.SwipeItem;\n\nnew Vue({\n  el: 'body',\n  // register components\n  components: {\n    'swipe': vueSwipe,\n    'swipe-item': vueSwipeItem\n  }\n  // ...\n  // ...\n});\n```\n\n\n## Options\n\n| Option | Type | Defalut  | Description |\n| ------ | ---- | -------- | ----------- |\n| v-model| Number | 0 |The value binding index of swipe-item |\n| pagination | Boolean | true |If need default pagination.|\n| loop | Boolean | true | loop move |\n| autoplayTime | Number | 0 | ms. Interval time of change card. The card will not auto change when this value is equal to 0\n| speed | Number | 300 | ms, the spend time of change card.\n|minMoveDistance | String | '20%' | Such as '20%', '80px'. The minimum distance that trigger to change card\n\n## Methods\n\n- **swipe.reset()**\n\nThe c-swipe internally recalculates the width of the Swipe and calculates the scroll distance based on the new width. This solves the problem that the c-swipe scroll distance is not correct after the container is resized.\n\nExample:\n```jsx\n\u003cswipe ref=\"swipe\"\u003e\n  \u003cswipe-item\u003eitem1\u003c/swipe-item\u003e\n  \u003cswipe-item\u003eitem2\u003c/swipe-item\u003e\n  \u003cswipe-item\u003eitem3\u003c/swipe-item\u003e\n\u003c/swipe\u003e\n\n\u003cscript\u003e\n  export default {\n    // ...\n    // ...\n\n    mounted() {\n      // Avoid losing context\n      this.handleResize = this.handleResize.bind(this);\n      window.addEventListener('resize', this.handleResize);\n    },\n\n    destroyed() {\n      window.removeEventListener('resize', this.handleResize);\n    },\n\n    methods: {\n      handleResize() {\n        this.$refs.swipe.reset();\n      },\n    },\n\n    // ...\n    // ...\n  }\n\u003c/script\u003e\n```\n\n\n## Preview\n\nScan the QR code below to preview\n\n![c-swpie](https://user-images.githubusercontent.com/18444796/36627765-96ab7978-1982-11e8-862d-354cee86f89b.png)\n\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpspgbhu%2Fvue-swipe-mobile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpspgbhu%2Fvue-swipe-mobile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpspgbhu%2Fvue-swipe-mobile/lists"}