vue-awesome-swiper

       

Swiper component for Vue.

---

⚠️ DEPRECATED

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.

1import { Swiper, SwiperSlide, /* rest swiper/vue API... */ } from 'vue-awesome-swiper'
2// exactly equivalent to
3import { 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.

Previous versions

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

---

Documentation

• Examples
• Swiper API
• Swiper Vue
• Swiper issues
• Swiper discussions

How to use

Install

1npm install swiper vue-awesome-swiper --save

1yarn add swiper vue-awesome-swiper

local component

1<template>
2  <swiper :modules="modules" :pagination="{ clickable: true }">
3    <swiper-slide>Slide 1</swiper-slide>
4    <swiper-slide>Slide 2</swiper-slide>
5    <swiper-slide>Slide 3</swiper-slide>
6  </swiper>
7</template>
8
9<script>
10  import SwiperClass, { Pagination } from 'Swiper'
11  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
12
13  // import swiper module styles
14  import 'swiper/css'
15  import 'swiper/css/pagination'
16  // more module style...
17
18  export default {
19    components: {
20      Swiper,
21      SwiperSlide
22    },
23    setup() {
24      return {
25        modules: [Pagination]
26      }
27    }
28  }
29</script>

global component

1import { createApp } from 'vue'
2import SwiperClass, { /* swiper modules... */ } from 'Swiper'
3import VueAwesomeSwiper from 'vue-awesome-swiper'
4
5// import swiper module styles
6import 'swiper/css'
7// more module style...
8
9// use swiper modules
10SwiperClass.use([/* swiper modules... */])
11
12const app = createApp()
13app.use(VueAwesomeSwiper)

Component API

1<!-- All options and events of the original Swiper are supported -->
2<swiper
3  :modules="..."
4  :allow-touch-move="false"
5  :slides-per-view="1"
6  :autoplay="{ delay: 3500, disableOnInteraction: false }"
7  @swiper="..."
8  @slide-change="..."
9  @transition-start="..."
10  ...
11>
12  <template #container-start><span>Container start</span></template>
13  <template #wrapper-start><span>Wrapper start</span></template>
14  <swiper-slide>Slide 1<swiper-slide>
15  <swiper-slide v-slot="{ isActive }">Slide 2 {{ isActive }}<swiper-slide>
16  <swiper-slide>Slide 3<swiper-slide>
17  <template #wrapper-end><span>Wrapper end</span></template>
18  <template #container-end><span>Container end</span></template>
19</swiper>

Changelog

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

License

MIT