surmon-china/vue-awesome-swiper
Fork: 1965 Star: 12826 (更新于 2024-12-09 16:04:39)
license: MIT
Language: JavaScript .
🏆 Swiper component for @vuejs
最后发布版本: v5.0.0 ( 2022-03-19 11:06:10)
vue-awesome-swiper
Swiper component for Vue.
DEPRECATED ⚠️
The vue-awesome-swiper project has been deprecated and superseded by 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 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
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.
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 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
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
Licensed under the MIT License.
最近版本更新:(数据更新于 2024-10-15 22:20:02)
2022-03-19 11:06:10 v5.0.0
2020-04-21 00:52:46 v4.1.1
2020-03-29 22:21:10 v4.1.0
2020-03-23 01:11:30 v4.0.4
2020-03-22 03:55:23 v4.0.3
2020-03-21 04:21:56 v4.0.2
2020-03-21 04:16:34 v4.0.1
2020-03-21 03:57:25 v4.0.0
2020-03-20 12:01:05 v4.0.0-rc.1
2020-03-19 13:18:00 v4.0.0-rc.0
主题(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
surmon-china/vue-awesome-swiper同语言 JavaScript最近更新仓库
2024-12-22 13:19:55 gethomepage/homepage
2024-12-22 11:34:40 chris81605/Degrees-of-Lewdity_Cheat_Extended
2024-12-22 00:44:14 gorhill/uBlock
2024-12-21 12:14:02 layui/layui
2024-12-21 03:44:01 emberjs/ember.js
2024-12-20 02:57:09 nodejs/node