Swiper component for Vue.

The vue-awesome-swiper project has been deprecated and superseded by Swiper Vue component, a TypeScript friendly project which is a recent official release provided by Swiper. For better stability, please migrate as soon as possible.

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 swiper/vue and only supports Vue3, which means only functions of swiper/vue 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.

import { Swiper, SwiperSlide, /* rest swiper/vue API... */ } from 'vue-awesome-swiper' // exactly equivalent to import { Swiper, SwiperSlide, /* rest swiper/vue API... */ } from 'swiper/vue'

If 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.

• Swiper 5-6 vue-awesome-swiper@4.1.1 (Vue2)
• Swiper 4.x vue-awesome-swiper@3.1.3 (Vue2)
• Swiper 3.x vue-awesome-swiper@2.6.7 (Vue2)

• Examples (Vue3)
• Examples (Vue2)
• Swiper API
• Swiper Vue (3)
• Swiper issues
• Swiper discussions

npm install swiper vue-awesome-swiper --save

yarn add swiper vue-awesome-swiper

<template> <swiper :modules="modules" :pagination="{ clickable: true }"> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> </swiper> </template> <script>  import SwiperClass, { Pagination } from 'swiper'  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'   // import swiper module styles  import 'swiper/css'  import 'swiper/css/pagination'  // more module style...   export default {  components: {  Swiper,  SwiperSlide  },  setup() {  return {  modules: [Pagination]  }  }  } </script>

import { createApp } from 'vue' import SwiperClass, { /* swiper modules... */ } from 'swiper' import VueAwesomeSwiper from 'vue-awesome-swiper' // import swiper module styles import 'swiper/css' // more module style... // use swiper modules SwiperClass.use([/* swiper modules... */]) const app = createApp() app.use(VueAwesomeSwiper)

<!-- All options and events of the original Swiper are supported --> <swiper :modules="..." :allow-touch-move="false" :slides-per-view="1" :autoplay="{ delay: 3500, disableOnInteraction: false }" @swiper="..." @slide-change="..." @transition-start="..." ... > <template #container-start><span>Container start</span></template> <template #wrapper-start><span>Wrapper start</span></template> <swiper-slide>Slide 1<swiper-slide> <swiper-slide v-slot="{ isActive }">Slide 2 {{ isActive }}<swiper-slide> <swiper-slide>Slide 3<swiper-slide> <template #wrapper-end><span>Wrapper end</span></template> <template #container-end><span>Container end</span></template> </swiper>

Detailed changes for each release are documented in the release notes.

Licensed under the MIT License.