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