Swiper component for Vue
npm install vue-awesome-swiper
Swiper component for Vue.
---
The vue-awesome-swiper project will be deprecated in favor of 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.0.0 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, which means only functions of that component are available. For example, the following code is fully equivalent in vue-awesome-swiper@5.0.0. And if you want to check update catelog of Swiper API, please refer to Swiper Changelog.
``ts`
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.
---
#### Install
` bash`
npm install swiper vue-awesome-swiper --save
`bash`
yarn add swiper vue-awesome-swiper
#### local component
`vue
`
#### global component
`javascript
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)
`
`html``
:allow-touch-move="false"
:slides-per-view="1"
:autoplay="{ delay: 3500, disableOnInteraction: false }"
@swiper="..."
@slide-change="..."
@transition-start="..."
...
>
Container start
Wrapper start
Wrapper end
Container end
Detailed changes for each release are documented in the release notes.