Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/surmon-china/vue-awesome-swiper

🏆 Swiper component for @vuejs
https://github.com/surmon-china/vue-awesome-swiper

List: vue-awesome-swiper

carousel carrousel nuxtjs slide swiper vue vue-awesome-swiper vue-carousel vue-component vue-components vue-plugin vue-swiper vue-swiper-component vue2 vuejs vuejs2

Last synced: 11 days ago
JSON representation

🏆 Swiper component for @vuejs

Lists

README 

        




  

    

  

       

  

    

  




# vue-awesome-swiper

[![vue](https://img.shields.io/badge/MADE%20WITH-VUE-42a97a?style=for-the-badge&labelColor=35495d)](https://vuejs.org)

 

[![GitHub stars](https://img.shields.io/github/stars/surmon-china/vue-awesome-swiper.svg?style=for-the-badge)](https://github.com/surmon-china/vue-awesome-swiper/stargazers)

 

[![GitHub issues](https://img.shields.io/github/issues/surmon-china/vue-awesome-swiper.svg?style=for-the-badge)](https://github.com/surmon-china/vue-awesome-swiper/issues)

 

[![npm](https://img.shields.io/npm/v/vue-awesome-swiper?color=c7343a&label=npm&style=for-the-badge)](https://www.npmjs.com/package/vue-awesome-swiper)

 

[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=for-the-badge)](/LICENSE)



**[Swiper](https://swiperjs.com)** component for Vue.



---



### DEPRECATED ⚠️



The **vue-awesome-swiper** project has been **deprecated** and superseded by [Swiper Vue component](https://swiperjs.com/vue), a TypeScript friendly project which is a recent official release provided by [Swiper](https://swiperjs.com/). 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](/index.js) [`swiper/vue`](https://swiperjs.com/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](https://swiperjs.com/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.



### Legacy versions

- Swiper 5-6 [[email protected]](https://github.com/surmon-china/vue-awesome-swiper/tree/v4.1.1) (Vue2)

- Swiper 4.x [[email protected]](https://github.com/surmon-china/vue-awesome-swiper/tree/v3.1.3) (Vue2)

- Swiper 3.x [[email protected]](https://github.com/surmon-china/vue-awesome-swiper/tree/v2.6.7) (Vue2)



---



### Documentation

- [Examples (Vue3)](https://github.surmon.me/vue-awesome-swiper)

- [Examples (Vue2)](https://v1.github.surmon.me/vue-awesome-swiper)

- [Swiper API](https://swiperjs.com/swiper-api)

- [Swiper Vue (3)](https://swiperjs.com/vue)

- [Swiper issues](https://github.com/nolimits4web/swiper/issues?q=is%3Aissue+is%3Aopen+label%3AVue)

- [Swiper discussions](https://github.com/nolimits4web/swiper/discussions)



### How to use



#### Install



``` bash

npm install swiper vue-awesome-swiper --save

```



```bash

yarn add swiper vue-awesome-swiper

```



#### Local component



```vue



  

    Slide 1

    Slide 2

    Slide 3

  



  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]

      }

    }

  }



```



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

```



### Component API



```html



  Container start

  Wrapper start

  Slide 1

  Slide 2 {{ isActive }}

  Slide 3

  Wrapper end

  Container end



```



### Changelog



Detailed changes for each release are documented in the [release notes](/CHANGELOG.md).



### License



Licensed under the [MIT](/LICENSE) License.