surmon-china / vue-awesome-swiper
š Swiper component for @vuejs
AI Architecture Analysis
This repository is indexed by RepoMind. By analyzing surmon-china/vue-awesome-swiper in our AI interface, you can instantly generate complete architecture diagrams, visualize control flows, and perform automated security audits across the entire codebase.
Our Agentic Context Augmented Generation (Agentic CAG) engine loads full source files into context, avoiding the fragmentation of traditional RAG systems. Ask questions about the architecture, dependencies, or specific features to see it in action.
Embed this Badge
Showcase RepoMind's analysis directly in your repository's README.
Repository Summary (README)
Previewvue-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.