
Product
Secure Your AI-Generated Code with Socket MCP
Socket MCP brings real-time security checks to AI-generated code, helping developers catch risky dependencies before they enter the codebase.
vue-awesome-swiper
Advanced tools
Swiper component for Vue.
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.
npm install swiper vue-awesome-swiper --save
yarn add swiper vue-awesome-swiper
<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>
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)
<!-- 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>
Detailed changes for each release are documented in the release notes.
FAQs
Swiper component for Vue
The npm package vue-awesome-swiper receives a total of 35,771 weekly downloads. As such, vue-awesome-swiper popularity was classified as popular.
We found that vue-awesome-swiper demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket MCP brings real-time security checks to AI-generated code, helping developers catch risky dependencies before they enter the codebase.
Security News
As vulnerability data bottlenecks grow, the federal government is formally investigating NIST’s handling of the National Vulnerability Database.
Research
Security News
Socket’s Threat Research Team has uncovered 60 npm packages using post-install scripts to silently exfiltrate hostnames, IP addresses, DNS servers, and user directories to a Discord-controlled endpoint.