5.0.1 • Published 2 years ago

vue-awesome-swiper v5.0.1

Weekly downloads
83,700
License
MIT
Repository
github
Last release
2 years ago

vue-awesome-swiper

vue   GitHub stars   npm   GitHub Workflow Status   license

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.

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.

Previous versions


Documentation

How to use

Install

npm install swiper vue-awesome-swiper --save
yarn add swiper vue-awesome-swiper

local component

<template>
  <swiper :modules="modules" :pagination="{ clickable: true }">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</template>

<script>
  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]
      }
    }
  }
</script>

global component

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

<!-- All options and events of the original Swiper are supported -->
<swiper
  :modules="..."
  :allow-touch-move="false"
  :slides-per-view="1"
  :autoplay="{ delay: 3500, disableOnInteraction: false }"
  @swiper="..."
  @slide-change="..."
  @transition-start="..."
  ...
>
  <template #container-start><span>Container start</span></template>
  <template #wrapper-start><span>Wrapper start</span></template>
  <swiper-slide>Slide 1<swiper-slide>
  <swiper-slide v-slot="{ isActive }">Slide 2 {{ isActive }}<swiper-slide>
  <swiper-slide>Slide 3<swiper-slide>
  <template #wrapper-end><span>Wrapper end</span></template>
  <template #container-end><span>Container end</span></template>
</swiper>

Changelog

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

License

MIT

5.0.1

2 years ago

5.0.0

2 years ago

4.1.1

4 years ago

4.1.0

4 years ago

4.0.4

4 years ago

4.0.3

4 years ago

4.0.1

4 years ago

4.0.0

4 years ago

4.0.2

4 years ago

4.0.0-rc.1

4 years ago

4.0.0-rc.0

4 years ago

3.1.3

6 years ago

3.1.2

6 years ago

3.1.1

6 years ago

3.1.0

6 years ago

3.0.7

6 years ago

3.0.6

6 years ago

3.0.4

6 years ago

3.0.3

6 years ago

3.0.2

6 years ago

3.0.1

6 years ago

3.0.0

6 years ago

2.6.7

6 years ago

2.6.6

6 years ago

2.6.5

7 years ago

2.6.4

7 years ago

2.6.2

7 years ago

2.6.0

7 years ago

2.5.6

7 years ago

2.5.4

7 years ago

2.5.2

7 years ago

2.5.0

7 years ago

2.4.8

7 years ago

2.4.4

7 years ago

2.4.2

7 years ago

2.4.0

7 years ago

2.3.8

7 years ago

2.3.6

7 years ago

2.3.4

7 years ago

2.3.2

7 years ago

2.3.1

7 years ago

2.3.0

7 years ago

2.2.9

7 years ago

2.2.8

7 years ago

2.2.6

7 years ago

2.2.5

7 years ago

2.2.4

7 years ago

2.2.3

7 years ago

2.2.2

7 years ago

2.2.1

7 years ago

2.2.0

7 years ago

2.1.1

7 years ago

2.1.0

7 years ago

2.0.0

7 years ago

1.6.0

7 years ago

1.4.0

7 years ago

1.2.0

7 years ago

1.0.0

7 years ago