\n\n# vue-awesome-swiper\n\n[](https://github.com/surmon-china/vue-awesome-swiper/stargazers)\n[](https://www.npmjs.com/package/vue-awesome-swiper)\n[](https://github.com/surmon-china/vue-awesome-swiper/actions?query=workflow%3APublish)\n[](https://github.com/surmon-china/vue-awesome-swiper/issues)\n[](https://github.com/surmon-china/vue-awesome-swiper/blob/master/LICENSE)\n\n[](https://www.npmjs.com/package/vue-awesome-swiper)\n\n**[Swiper](https://swiperjs.com)** component for Vue.\n\nOld versions:\n- Swiper 4: [v3.1.3](https://github.com/surmon-china/vue-awesome-swiper/tree/v3.1.3)\n- Swiper 3: [v2.6.7](https://github.com/surmon-china/vue-awesome-swiper/tree/v2.6.7) \n\n\n### Example\n- [Online examples](https://github.surmon.me/vue-awesome-swiper)\n- [CDN example](https://jsfiddle.net/surmon/kLtj6h3p/)\n- [SSR example code](https://github.com/surmon-china/surmon-china.github.io/tree/source/projects/vue-awesome-swiper/nuxt)\n- [TypeScript & composition-api example code](https://github.com/surmon-china/surmon-china.github.io/blob/source/projects/vue-awesome-swiper/examples/00-typescript-composition-api.vue)\n\n---\n\n### Install\n\n``` bash\nnpm install swiper vue-awesome-swiper --save\n\n# or\nyarn add swiper vue-awesome-swiper\n```\n\n### Global Registration\n\n``` javascript\nimport Vue from 'vue'\nimport VueAwesomeSwiper from 'vue-awesome-swiper'\n\n// import style\nimport 'swiper/css/swiper.css'\n\nVue.use(VueAwesomeSwiper, /* { default options with global component } */)\n```\n\n### Local Registration\n\n```javascript\nimport { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'\nimport 'swiper/css/swiper.css'\n\nexport default {\n components: {\n Swiper,\n SwiperSlide\n },\n directives: {\n swiper: directive\n }\n}\n```\n\n### CDN\n\n``` html\n\n\n\n\n\n```\n\n---\n\n### Difference with usage\n\n**Directive and the only difference in the use of the Component:**\n- `component` find Swiper instance by [`ref attribute`](https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements).\n- `directive` find Swiper instance by [`directive arg`](https://vuejs.org/v2/guide/custom-directive.html#Dynamic-Directive-Arguments).\n\nOther configurations, events are the same. \n\nThe effect of the two ways and the difference in the applicable environment [is here](https://github.com/surmon-china/surmon-china.github.io/blob/source/projects/vue-awesome-swiper/nuxt/).\n\n\n### Component\n\n```html\n\n \n Slide 1\n Slide 2\n Slide 3\n Slide 4\n Slide 5\n \n \n\n\n\n```\n\n\n### Directive\n\n```html\n\n
\n
\n
\n \n
\n
\n \n
\n\n\n\n```\n\n---\n\n### Swiper component API\n\n```html\n\n\n\n\n\n```\n```ts\ninterface IProps {\n // Auto update swiper when vue component `updated`\n autoUpdate?: boolean // default: true\n // Auto destroy swiper when vue component 'beforeDestroy'\n autoDestroy?: boolean // default: true\n\n // swiper.destroy's params\n // swiper.destroy(deleteInstanceOnDestroy, cleanupStylesOnDestroy)\n deleteInstanceOnDestroy?: boolean // default: true\n cleanupStylesOnDestroy?: boolean // default: true\n}\n\n// `@ready` event will emit when the Swiper instance mounted\nfunction handleSwiperReadied(swiper: Swiper) {\n console.log('Swiper was munted!', swiper)\n}\n\n// `@click-slide` event has special treatment for Swiper's loop mode, which is still available in loop mode\nfunction handleClickSlide(index: number, reallyIndex: number | null) {\n console.log('Click slide!', index, reallyIndex)\n}\n```\n\n### Swiper directive API\n\nBased on the exact same as the component API.\n\nIn the `directive` mode, the Swiper instance will be mounted in the parent's component context use the default name`$swiper`. In order to implement multiple swipers in a context, the `directive` has an additional name called `instanceName` API, through this API, you can easily control the name of each swiper mount context.\n\n```html\n\n\n\n\n```\n```ts\nexport dafault {\n data() {\n return {\n dynamicSwiperName: 'thirdSwiper'\n }\n },\n mounted() {\n console.log('Swiper instances:', this.$swiper, this.secondSwiper, this.thirdSwiper, this.fourthSwiper)\n }\n}\n```\n\n### Swiper API\nSwiper's API and configuration can be used.\n\n- [EN Swiper events](https://swiperjs.com/api/#events)\n- [EN Swiper documentation](https://swiperjs.com/api/)\n- [ZH Swiper documentation](https://www.swiper.com.cn/api/index.html)\n\n---\n\n### [Custom Build with Swiper](https://swiperjs.com/api/#custom-build)\n\n```ts\nimport Vue from 'vue'\nimport { Swiper as SwiperClass, Pagination, Mousewheel, Autoplay } from 'swiper/js/swiper.esm'\nimport getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'\n\n// Swiper modules\nSwiperClass.use([Pagination, Mousewheel, Autoplay])\n\n// -------------------------------------------------\n\n// Global use\nVue.use(getAwesomeSwiper(SwiperClass))\n\n// -------------------------------------------------\n\n// Or local component\nconst { Swiper, SwiperSlide } = getAwesomeSwiper(SwiperClass)\nexport default {\n components: {\n Swiper,\n SwiperSlide\n }\n}\n```\n\n### Custom Swiper plugin\n\n```javascript\nimport SwiperClass from 'swiper'\n\nSwiperClass.use({\n name: 'pluginName',\n params: {\n pluginSwitch: false,\n },\n on: {\n init() {\n if (!this.params.pluginSwitch) return\n console.log('init')\n },\n // ...\n }\n})\n\n// Your Swiper or App bussiness component...\n```\n---\n\n### Changelog\n\nDetailed changes for each release are documented in the [release notes](https://github.com/surmon-china/vue-awesome-swiper/blob/master/CHANGELOG.md).\n\n### License\n\n[MIT](https://github.com/surmon-china/vue-awesome-swiper/blob/master/LICENSE)\n","readmeFilename":"README.md"}
![](\"https://github.surmon.me/images/common/swiper-logo.svg\"){kind=logo}
\n \n \n \n ![](\"https://github.surmon.me/images/common/vue-logo.png\"){kind=logo}
\n \n