vue-awesome-swiper

 
 
 
 

Swiper component for Vue.

---

$3

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.

$3

- 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)

---

$3

- Examples
- Swiper API
- Swiper Vue
- Swiper issues
- Swiper discussions

$3

#### 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)
`

$3

`html

:modules="..."
:allow-touch-move="false"
:slides-per-view="1"
:autoplay="{ delay: 3500, disableOnInteraction: false }"
@swiper="..."
@slide-change="..."
@transition-start="..."
...
>


Slide 1
Slide 2 {{ isActive }}
Slide 3



``

$3

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

$3

MIT