Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

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

🏆 Swiper component for @vuejs
https://github.com/surmon-china/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: 2 months ago
JSON representation

🏆 Swiper component for @vuejs

Host: GitHub
URL: https://github.com/surmon-china/vue-awesome-swiper
Owner: surmon-china
License: mit
Archived: true
Created: 2016-10-05T17:15:44.000Z (about 8 years ago)
Default Branch: main
Last Pushed: 2022-12-21T15:10:44.000Z (almost 2 years ago)
Last Synced: 2024-04-14T06:08:54.336Z (8 months ago)
Topics: 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
Language: JavaScript
Homepage: https://github.surmon.me/vue-awesome-swiper
Size: 1.14 MB
Stars: 12,786
Watchers: 213
Forks: 1,974
Open Issues: 307
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

awesome-vue - vue-awesome-swiper - china/vue-awesome-swiper?style=social) - vue.js触摸滑动组件 (UI组件)
awesome-github-star - vue-awesome-swiper - china | 12735 | (JavaScript)
awesome-github-vue - vue-awesome-swiper - vue.js触摸滑动组件 (UI组件)
awesome-made-by-chinese - vue-awesome-swiper
awesome-vue - vue-awesome-swiper - vue.js触摸滑动组件 (UI组件)
awesome-github-vue - vue-awesome-swiper - vue.js触摸滑动组件 (UI组件)
awesome - vue-awesome-swiper - vue.js触摸滑动组件 (UI组件)

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.