{"id":13761782,"url":"https://github.com/drewjbartlett/vue-flickity","last_synced_at":"2025-05-16T17:08:45.998Z","repository":{"id":44874644,"uuid":"75674768","full_name":"drewjbartlett/vue-flickity","owner":"drewjbartlett","description":"A Vue Slider / Carousel Component for Flickity.js","archived":false,"fork":false,"pushed_at":"2021-08-10T17:49:21.000Z","size":165,"stargazers_count":373,"open_issues_count":25,"forks_count":55,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-05-11T19:01:35.118Z","etag":null,"topics":["carousel","flickity","slider","vue","vue-components"],"latest_commit_sha":null,"homepage":"http://drewjbartlett.com/demos/vue-flickity/","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/drewjbartlett.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-12-05T23:14:55.000Z","updated_at":"2025-04-29T12:41:25.000Z","dependencies_parsed_at":"2022-09-01T18:43:20.305Z","dependency_job_id":null,"html_url":"https://github.com/drewjbartlett/vue-flickity","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/drewjbartlett%2Fvue-flickity","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drewjbartlett%2Fvue-flickity/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drewjbartlett%2Fvue-flickity/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drewjbartlett%2Fvue-flickity/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drewjbartlett","download_url":"https://codeload.github.com/drewjbartlett/vue-flickity/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254573589,"owners_count":22093731,"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","flickity","slider","vue","vue-components"],"created_at":"2024-08-03T14:00:28.305Z","updated_at":"2025-05-16T17:08:45.975Z","avatar_url":"https://github.com/drewjbartlett.png","language":"Vue","funding_links":[],"categories":["UI Components [🔝](#readme)","Libraries \u0026 Plugins","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","UI组件","Components \u0026 Libraries","UI Components"],"sub_categories":["Carousels (sliders)","Libraries \u0026 Plugins","圆盘传送带","UI Components","Carousel"],"readme":"# Flickity for Vue.js\n\n[![npm](https://img.shields.io/npm/v/vue-flickity.svg?style=flat-square)](https://www.npmjs.com/package/vue-flickity)\n[![npm](https://img.shields.io/npm/dt/vue-flickity.svg?style=flat-square)](https://www.npmjs.com/package/vue-flickity)\n[![npm](https://img.shields.io/travis/drewjbartlett/vue-flickity.svg?branch=master\u0026style=flat-square)](https://www.npmjs.com/package/vue-flickity)\n\nA Vue Component for Flickity.js - See a live demo [here](http://drewjbartlett.com/demos/vue-flickity/).\n\n\u003cp align=\"center\"\u003e\n    \u003cimg width=\"200\" src=\"http://flickity.metafizzy.co/img/flickity-illustration.gif\" alt=\"Flickity\"\u003e\n    \u003cimg width=\"200\" src=\"https://vuejs.org/images/logo.png\" alt=\"Vue.js\"\u003e\n\u003c/p\u003e\n\n## Vue support\n\nSupports only Vue \u003e= 2\n\n## Installation and usage\n\nSee official documentation [here](http://flickity.metafizzy.co/).\n\n  $ npm install vue-flickity --save\n\n```js\nimport Flickity from 'vue-flickity';\n\nnew Vue({\n  components: {\n    Flickity\n  },\n  \n  data() {\n    return {\n      flickityOptions: {\n        initialIndex: 3,\n        prevNextButtons: false,\n        pageDots: false,\n        wrapAround: true\n        \n        // any options from Flickity can be used\n      }\n    }\n  },\n  \n  methods: {\n    next() {\n      this.$refs.flickity.next();\n    },\n    \n    previous() {\n      this.$refs.flickity.previous();\n    }\n  }\n});\n```\n\n```html\n\u003cflickity ref=\"flickity\" :options=\"flickityOptions\"\u003e\n  \u003cdiv class=\"carousel-cell\"\u003e1\u003c/div\u003e\n  \u003cdiv class=\"carousel-cell\"\u003e2\u003c/div\u003e\n  \u003cdiv class=\"carousel-cell\"\u003e3\u003c/div\u003e\n  \u003cdiv class=\"carousel-cell\"\u003e4\u003c/div\u003e\n  \u003cdiv class=\"carousel-cell\"\u003e5\u003c/div\u003e\n\u003c/flickity\u003e\n\n\u003c!-- if you don't want to use the buttons Flickity provides --\u003e\n\u003cbutton @click=\"previous()\"\u003eCustom Previous Button\u003c/button\u003e\n\u003cbutton @click=\"next()\"\u003eCustom Next Button\u003c/button\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrewjbartlett%2Fvue-flickity","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrewjbartlett%2Fvue-flickity","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrewjbartlett%2Fvue-flickity/lists"}