[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3419":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":14,"stars7d":17,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":18,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":22,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":40,"readmeContent":41,"aiSummary":42,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":43,"discoverSource":44},3419,"vue-awesome-swiper","surmon-china\u002Fvue-awesome-swiper","surmon-china","🏆 Swiper component for @vuejs","https:\u002F\u002Fgithub.surmon.me\u002Fvue-awesome-swiper",null,"JavaScript",12790,1933,1,307,0,2,4,73.06,"MIT License",true,false,"main",[25,26,27,28,29,30,5,31,32,33,34,35,36,37,38,39],"carousel","carrousel","nuxtjs","slide","swiper","vue","vue-carousel","vue-component","vue-components","vue-plugin","vue-swiper","vue-swiper-component","vue2","vuejs","vuejs2","2026-06-12 04:00:17","\u003Cp>\u003C\u002Fp>\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fswiperjs.com\" target=\"_blank\">\n    \u003Cimg width=\"77px\" src=\"\u002Fpresses\u002Fswiper-logo.svg\" \u002F>\n  \u003C\u002Fa>\n  \u003Cspan>     \u003C\u002Fspan>\n  \u003Ca href=\"https:\u002F\u002Fvuejs.org\" target=\"_blank\">\n    \u003Cimg width=\"79px\" src=\"\u002Fpresses\u002Fvue-logo.png\" \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n# vue-awesome-swiper\n[![vue](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FMADE%20WITH-VUE-42a97a?style=for-the-badge&labelColor=35495d)](https:\u002F\u002Fvuejs.org)\n \n[![GitHub stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fsurmon-china\u002Fvue-awesome-swiper.svg?style=for-the-badge)](https:\u002F\u002Fgithub.com\u002Fsurmon-china\u002Fvue-awesome-swiper\u002Fstargazers)\n \n[![GitHub issues](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fissues\u002Fsurmon-china\u002Fvue-awesome-swiper.svg?style=for-the-badge)](https:\u002F\u002Fgithub.com\u002Fsurmon-china\u002Fvue-awesome-swiper\u002Fissues)\n \n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fvue-awesome-swiper?color=c7343a&label=npm&style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvue-awesome-swiper)\n \n[![license](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fmashape\u002Fapistatus.svg?style=for-the-badge)](\u002FLICENSE)\n\n\n**[Swiper](https:\u002F\u002Fswiperjs.com)** component for Vue.\n\n---\n\n### DEPRECATED ⚠️\n\nThe **vue-awesome-swiper** project has been **deprecated** and superseded by [Swiper Vue component](https:\u002F\u002Fswiperjs.com\u002Fvue), a TypeScript friendly project which is a recent official release provided by [Swiper](https:\u002F\u002Fswiperjs.com\u002F). For better stability, please migrate as soon as possible.\n\n**vue-awesome-swiper** released its last version **v5** for (bridge) transition. It's worth noting that APIs in this version are completely **NOT compatible** with that of previous version, it only [re-exports](\u002Findex.js) [`swiper\u002Fvue`](https:\u002F\u002Fswiperjs.com\u002Fvue) and **only supports Vue3**, which means only functions of `swiper\u002Fvue` are available. For example, the following code is fully equivalent in `vue-awesome-swiper@5`. And if you want to check update catelog of Swiper API, please refer to [Swiper Changelog](https:\u002F\u002Fswiperjs.com\u002Fchangelog).\n\n```ts\nimport { Swiper, SwiperSlide, \u002F* rest swiper\u002Fvue API... *\u002F } from 'vue-awesome-swiper'\n\u002F\u002F exactly equivalent to\nimport { Swiper, SwiperSlide, \u002F* rest swiper\u002Fvue API... *\u002F } from 'swiper\u002Fvue'\n```\n\nIf you need to use older versions of vue-awesome-swiper, you can find the corresponding version number below. Feel free to fork our code and maintain your own copy.\n\n### Legacy versions\n- Swiper 5-6 [vue-awesome-swiper@4.1.1](https:\u002F\u002Fgithub.com\u002Fsurmon-china\u002Fvue-awesome-swiper\u002Ftree\u002Fv4.1.1) (Vue2)\n- Swiper 4.x [vue-awesome-swiper@3.1.3](https:\u002F\u002Fgithub.com\u002Fsurmon-china\u002Fvue-awesome-swiper\u002Ftree\u002Fv3.1.3) (Vue2)\n- Swiper 3.x [vue-awesome-swiper@2.6.7](https:\u002F\u002Fgithub.com\u002Fsurmon-china\u002Fvue-awesome-swiper\u002Ftree\u002Fv2.6.7) (Vue2)\n\n---\n\n### Documentation\n- [Examples (Vue3)](https:\u002F\u002Fgithub.surmon.me\u002Fvue-awesome-swiper)\n- [Examples (Vue2)](https:\u002F\u002Fv1.github.surmon.me\u002Fvue-awesome-swiper)\n- [Swiper API](https:\u002F\u002Fswiperjs.com\u002Fswiper-api)\n- [Swiper Vue (3)](https:\u002F\u002Fswiperjs.com\u002Fvue)\n- [Swiper issues](https:\u002F\u002Fgithub.com\u002Fnolimits4web\u002Fswiper\u002Fissues?q=is%3Aissue+is%3Aopen+label%3AVue)\n- [Swiper discussions](https:\u002F\u002Fgithub.com\u002Fnolimits4web\u002Fswiper\u002Fdiscussions)\n\n### How to use\n\n#### Install\n\n``` bash\nnpm install swiper vue-awesome-swiper --save\n```\n\n```bash\nyarn add swiper vue-awesome-swiper\n```\n\n#### Local component\n\n```vue\n\u003Ctemplate>\n  \u003Cswiper :modules=\"modules\" :pagination=\"{ clickable: true }\">\n    \u003Cswiper-slide>Slide 1\u003C\u002Fswiper-slide>\n    \u003Cswiper-slide>Slide 2\u003C\u002Fswiper-slide>\n    \u003Cswiper-slide>Slide 3\u003C\u002Fswiper-slide>\n  \u003C\u002Fswiper>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n  import SwiperClass, { Pagination } from 'swiper'\n  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'\n\n  \u002F\u002F import swiper module styles\n  import 'swiper\u002Fcss'\n  import 'swiper\u002Fcss\u002Fpagination'\n  \u002F\u002F more module style...\n\n  export default {\n    components: {\n      Swiper,\n      SwiperSlide\n    },\n    setup() {\n      return {\n        modules: [Pagination]\n      }\n    }\n  }\n\u003C\u002Fscript>\n```\n\n#### Global component\n\n```javascript\nimport { createApp } from 'vue'\nimport SwiperClass, { \u002F* swiper modules... *\u002F } from 'swiper'\nimport VueAwesomeSwiper from 'vue-awesome-swiper'\n\n\u002F\u002F import swiper module styles\nimport 'swiper\u002Fcss'\n\u002F\u002F more module style...\n\n\u002F\u002F use swiper modules\nSwiperClass.use([\u002F* swiper modules... *\u002F])\n\nconst app = createApp()\napp.use(VueAwesomeSwiper)\n```\n\n### Component API\n\n```html\n\u003C!-- All options and events of the original Swiper are supported -->\n\u003Cswiper\n  :modules=\"...\"\n  :allow-touch-move=\"false\"\n  :slides-per-view=\"1\"\n  :autoplay=\"{ delay: 3500, disableOnInteraction: false }\"\n  @swiper=\"...\"\n  @slide-change=\"...\"\n  @transition-start=\"...\"\n  ...\n>\n  \u003Ctemplate #container-start>\u003Cspan>Container start\u003C\u002Fspan>\u003C\u002Ftemplate>\n  \u003Ctemplate #wrapper-start>\u003Cspan>Wrapper start\u003C\u002Fspan>\u003C\u002Ftemplate>\n  \u003Cswiper-slide>Slide 1\u003Cswiper-slide>\n  \u003Cswiper-slide v-slot=\"{ isActive }\">Slide 2 {{ isActive }}\u003Cswiper-slide>\n  \u003Cswiper-slide>Slide 3\u003Cswiper-slide>\n  \u003Ctemplate #wrapper-end>\u003Cspan>Wrapper end\u003C\u002Fspan>\u003C\u002Ftemplate>\n  \u003Ctemplate #container-end>\u003Cspan>Container end\u003C\u002Fspan>\u003C\u002Ftemplate>\n\u003C\u002Fswiper>\n```\n\n### Changelog\n\nDetailed changes for each release are documented in the [release notes](\u002FCHANGELOG.md).\n\n### License\n\nLicensed under the [MIT](\u002FLICENSE) License.\n\n","vue-awesome-swiper 是一个专为 Vue.js 设计的 Swiper 组件。它集成了 Swiper 的强大功能，如轮播图、滑动效果等，并通过简洁的 API 使开发者能够轻松在 Vue 项目中实现复杂的滑动交互。该组件支持 Vue3，并且是 TypeScript 友好的，但需要注意的是，当前版本仅作为向新官方 Swiper Vue 组件过渡的桥梁，其 API 与旧版不兼容。适用于需要在 Vue 应用程序中添加轮播或滑动展示功能的场景，尤其是正在迁移至 Vue3 或希望利用最新 Swiper 功能的项目。由于此项目已被弃用，建议用户迁移到由 Swiper 官方维护的新版本以获得更好的稳定性和技术支持。","2026-06-11 02:54:10","top_language"]