{"id":13459120,"url":"https://github.com/shhdgit/vue-easy-slider","last_synced_at":"2025-05-16T15:03:32.064Z","repository":{"id":112618340,"uuid":"65568646","full_name":"shhdgit/vue-easy-slider","owner":"shhdgit","description":"Slider Component of Vue.js.","archived":false,"fork":false,"pushed_at":"2024-03-07T07:26:01.000Z","size":274,"stargazers_count":357,"open_issues_count":2,"forks_count":64,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-03T11:12:01.934Z","etag":null,"topics":["carrousel","slider","slides","swipe","swiper","vue-directive","vue-plugin","vue-slider","vue-swiper"],"latest_commit_sha":null,"homepage":"","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/shhdgit.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":"2016-08-12T16:41:35.000Z","updated_at":"2025-02-23T10:16:20.000Z","dependencies_parsed_at":"2024-07-31T09:10:14.093Z","dependency_job_id":null,"html_url":"https://github.com/shhdgit/vue-easy-slider","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shhdgit%2Fvue-easy-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shhdgit%2Fvue-easy-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shhdgit%2Fvue-easy-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shhdgit%2Fvue-easy-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shhdgit","download_url":"https://codeload.github.com/shhdgit/vue-easy-slider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248565003,"owners_count":21125413,"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":["carrousel","slider","slides","swipe","swiper","vue-directive","vue-plugin","vue-slider","vue-swiper"],"created_at":"2024-07-31T09:01:05.082Z","updated_at":"2025-04-12T11:51:29.236Z","avatar_url":"https://github.com/shhdgit.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI组件","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Components \u0026 Libraries","UI Components","Awesome Vue.js","UI Components [🔝](#readme)"],"sub_categories":["Component Collections","圆盘传送带","UI Components","Carousel"],"readme":"# vue-easy-slider\n\n[![Travis branch](https://img.shields.io/travis/com/shhdgit/vue-easy-slider.svg?style=flat-square)](https://travis-ci.com/shhdgit/vue-easy-slider)\n[![prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://prettier.io/)\n[![NPM package](https://img.shields.io/npm/v/vue-easy-slider.svg?style=flat-square)](https://www.npmjs.org/package/vue-easy-slider)\n[![NPM downloads](http://img.shields.io/npm/dm/vue-easy-slider.svg?style=flat-square)](https://npmjs.org/package/vue-easy-slider)\n[![GitHub license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/shhdgit/vue-easy-slider/blob/master/LICENCE)\n\nKeep slider simple!\n\n## Demo\n\n[demo](https://codesandbox.io/embed/vnynj6o500)\n\n## Install\n\n```bash\nnpm i -S vue-easy-slider\n```\n\n## Usage\n\nPlugin install:\n\n```js\nimport Vue from 'vue'\nimport EasySlider from 'vue-easy-slider'\n\nVue.use(EasySlider)\n```\n\nOr work on a Vue instance:\n\n```HTML\n\u003cslider animation=\"fade\"\u003e\n  \u003cslider-item\n    v-for=\"(i, index) in list\"\n    :key=\"index\"\n    :style=\"i\"\n    @click=\"hello\"\n  \u003e\n    \u003cp style=\"line-height: 280px; font-size: 5rem; text-align: center;\"\u003ePage{{ index + 1 }}\u003c/p\u003e\n  \u003c/slider-item\u003e\n\u003c/slider\u003e\n```\n\n```JavaScript\nimport { Slider, SliderItem } from 'vue-easy-slider'\n\nnew Vue({\n  el: 'body',\n  components: {\n    Slider,\n    SliderItem,\n  },\n  data() {\n    return {\n      list: [\n        { backgroundColor: '#3f51b5', width: '100%', height: '100%' },\n        { backgroundColor: '#eee', width: '100%', height: '100%' },\n        { backgroundColor: '#f44336', width: '100%', height: '100%' },\n      ],\n    }\n  },\n  methods: {\n    hello($event) {\n      console.log(`hello index: ${$event}`)\n    },\n  },\n})\n```\n\nControl slider with v-model\n\n```HTML\n\u003cslider animation=\"fade\" v-model=\"sliderIndex\"\u003e\n  ...\n\u003c/slider\u003e\n\u003cbutton @click=\"moveToIndex(2)\"\u003emove to page 3\u003c/button\u003e\n```\n```JavaScript\n...\n  data() {\n    return {\n      // initial index\n      sliderIndex: 1,\n      list: [\n        { backgroundColor: '#3f51b5', width: '100%', height: '100%' },\n        { backgroundColor: '#eee', width: '100%', height: '100%' },\n        { backgroundColor: '#f44336', width: '100%', height: '100%' },\n      ],\n    }\n  },\n  methods: {\n    moveToIndex(index) {\n      this.sliderIndex = index\n    },\n  },\n...\n```\n\n## Props\n\nSlider：\n\n| name            | type                             | default    | description                                                            |\n| --------------- | -------------------------------- | ---------- | ---------------------------------------------------------------------- |\n| width           | String                           | auto       | Slider width                                                           |\n| height          | String                           | 300px      | Slider height                                                          |\n| touch           | Boolean                          | true       | Enable touch slide                                                     |\n| animation       | 'normal', 'fade'                 | 'normal'   | Change animation                                                       |\n| autoplay        | Boolean                          | true       | Autoplay                                                               |\n| stopOnHover     | Boolean                          | false      | Stop autoplay when hover                                                               |\n| interval        | Number                           | 3000       | Delay of autoplay ( autoplay option should be true )                   |\n| speed           | Number                           | 500        | Speed(ms) of animation                                                 |\n| indicators      | 'center', 'left', 'right', false | 'center'   | Show indicators on option position or hide indicators                  |\n| control-btn     | Boolean                          | true       | Show control button                                                    |\n| before-next     | Function                         | () =\u003e true | Before next guard, sliding to next item when this function return true |\n| before-previous | Function                         | () =\u003e true | Before previous guard                                                  |\n\n## Events\n\nSlider：\n\n| name     | description                                              | $event                             |\n| -------- | -------------------------------------------------------- | ---------------------------------- |\n| change   | Fires when the slide change                              | number  // index of slides         |\n| next     | Fires when the button for the next slide was pressed     | { original: number, next: number } |\n| previous | Fires when the button for the previous slide was pressed | { original: number, next: number } |\n\n## Slots\n\nSliderItem：\n\n| name    | description         |\n| ------- | ------------------- |\n| default | Item content        |\n| loading | Loading placeholder |\n\nusage:\n\n```HTML\n\u003cslider\u003e\n  \u003cslider-item\u003e\n    \u003cimg src=\"\"\u003e\n    \u003cp\u003e\u003c/p\u003e\n    \u003cbutton\u003e\u003c/button\u003e\n  \u003c/slider-item\u003e\n  \u003cdiv slot=\"loading\"\u003ecustom loading ...\u003c/div\u003e\n\u003c/slider\u003e\n```\n\n# License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshhdgit%2Fvue-easy-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshhdgit%2Fvue-easy-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshhdgit%2Fvue-easy-slider/lists"}