Gathering detailed insights and metrics for anx-vue-swiper
Gathering detailed insights and metrics for anx-vue-swiper
Gathering detailed insights and metrics for anx-vue-swiper
Gathering detailed insights and metrics for anx-vue-swiper
npm install anx-vue-swiper
Typescript
Module System
Min. Node Version
Node Version
NPM Version
63.3
Supply Chain
97.8
Quality
75
Maintenance
25
Vulnerability
99.6
License
JavaScript (59.82%)
Shell (40.18%)
Total Downloads
2,262
Last Day
1
Last Week
2
Last Month
19
Last Year
211
MIT License
12,830 Stars
299 Commits
1,950 Forks
211 Watchers
6 Branches
19 Contributors
Updated on Jul 06, 2025
Minified
Minified + Gzipped
Latest Version
0.0.6
Package Id
anx-vue-swiper@0.0.6
Unpacked Size
32.62 kB
Size
9.52 kB
File Count
10
NPM Version
6.3.0
Node Version
10.1.0
Cumulative downloads
Total Downloads
Last Day
0%
1
Compared to previous day
Last Week
100%
2
Compared to previous week
Last Month
26.7%
19
Compared to previous month
Last Year
-44.8%
211
Compared to previous year
3
73
Swiper4 component for Vue, support pc and mobile, SPA and SSR.
If you need to roll back to Swiper3, use version v2.6.7.
基于 Swiper4、适用于 Vue 的轮播组件,支持服务端渲染和单页应用。
如果需要回退到 Swiper3,请使用 v2.6.7 版本。
1<link rel="stylesheet" href="path/to/swiper/dist/css/swiper.css"/> 2<script type="text/javascript" src="path/to/swiper.js"></script> 3<script type="text/javascript" src="path/to/vue.min.js"></script> 4<script type="text/javascript" src="path/to/dist/vue-awesome-swiper.js"></script> 5<script type="text/javascript"> 6 Vue.use(window.VueAwesomeSwiper) 7</script>
1npm install vue-awesome-swiper --save
1import Vue from 'vue' 2import VueAwesomeSwiper from 'vue-awesome-swiper' 3 4// require styles 5import 'swiper/dist/css/swiper.css' 6 7Vue.use(VueAwesomeSwiper, /* { default global options } */)
1// require styles 2import 'swiper/dist/css/swiper.css' 3 4import { swiper, swiperSlide } from 'vue-awesome-swiper' 5 6export default { 7 components: { 8 swiper, 9 swiperSlide 10 } 11}
1// If used in nuxt.js/ssr, you should keep it only in browser build environment 2if (process.browser) { 3 const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr') 4 Vue.use(VueAwesomeSwiper) 5}
1import Swiper from 'swiper' 2Swiper.use({ 3 name: 'pluginName', 4 params: { 5 pluginSwitch: false, 6 }, 7 on: { 8 init() { 9 if (!this.params.pluginSwitch) return 10 console.log('init') 11 }, 12 // swiper callback... 13 } 14})
SSR and the only difference in the use of the SPA:
component
, find swiper instance by ref attribute
.directive
, find swiper instance by directive arg
.1<!-- The ref attr used to find the swiper instance --> 2<template> 3 <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"> 4 <!-- slides --> 5 <swiper-slide>I'm Slide 1</swiper-slide> 6 <swiper-slide>I'm Slide 2</swiper-slide> 7 <swiper-slide>I'm Slide 3</swiper-slide> 8 <swiper-slide>I'm Slide 4</swiper-slide> 9 <swiper-slide>I'm Slide 5</swiper-slide> 10 <swiper-slide>I'm Slide 6</swiper-slide> 11 <swiper-slide>I'm Slide 7</swiper-slide> 12 <!-- Optional controls --> 13 <div class="swiper-pagination" slot="pagination"></div> 14 <div class="swiper-button-prev" slot="button-prev"></div> 15 <div class="swiper-button-next" slot="button-next"></div> 16 <div class="swiper-scrollbar" slot="scrollbar"></div> 17 </swiper> 18</template> 19 20<script> 21 export default { 22 name: 'carrousel', 23 data() { 24 return { 25 swiperOption: { 26 // some swiper options/callbacks 27 // 所有的参数同 swiper 官方 api 参数 28 // ... 29 } 30 } 31 }, 32 computed: { 33 swiper() { 34 return this.$refs.mySwiper.swiper 35 } 36 }, 37 mounted() { 38 // current swiper instance 39 // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了 40 console.log('this is current swiper instance object', this.swiper) 41 this.swiper.slideTo(3, 1000, false) 42 } 43 } 44</script>
1<template> 2 <swiper :options="swiperOption"> 3 <swiper-slide v-for="(slide, index) in swiperSlides" :key="index">I'm Slide {{ slide }}</swiper-slide> 4 <div class="swiper-pagination" slot="pagination"></div> 5 </swiper> 6</template> 7 8<script> 9 export default { 10 name: 'carrousel', 11 data() { 12 return { 13 swiperOption: { 14 pagination: { 15 el: '.swiper-pagination' 16 } 17 }, 18 swiperSlides: [1, 2, 3, 4, 5] 19 } 20 }, 21 mounted() { 22 setInterval(() => { 23 console.log('simulate async data') 24 if (this.swiperSlides.length < 10) { 25 this.swiperSlides.push(this.swiperSlides.length + 1) 26 } 27 }, 3000) 28 } 29 } 30</script>
1<!-- You can custom the "mySwiper" name used to find the swiper instance in current component --> 2<template> 3 <div v-swiper:mySwiper="swiperOption" @someSwiperEvent="callback"> 4 <div class="swiper-wrapper"> 5 <div class="swiper-slide" v-for="banner in banners"> 6 <img :src="banner"> 7 </div> 8 </div> 9 <div class="swiper-pagination"></div> 10 </div> 11</template> 12 13<script> 14 export default { 15 data () { 16 return { 17 banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ], 18 swiperOption: { 19 pagination: { 20 el: '.swiper-pagination' 21 }, 22 // some swiper options... 23 } 24 } 25 }, 26 mounted() { 27 setTimeout(() => { 28 this.banners.push('/4.jpg') 29 console.log('banners update') 30 }, 3000) 31 console.log( 32 'This is current swiper instance object', this.mySwiper, 33 'It will slideTo banners 3') 34 this.mySwiper.slideTo(3, 1000, false) 35 } 36 } 37</script>
Swiper's API and configuration can be used.(Swiper官网中的API及配置均可使用)
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
2 existing vulnerabilities detected
Details
Reason
Found 1/30 approved changesets -- score normalized to 0
Reason
project is archived
Details
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
Reason
security policy file not detected
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More