代码拉取完成,页面将自动刷新
Swiper5 component for Vue, support pc and mobile, SPA
npm install vue-swiper5 --save
import Vue from 'vue'
import VueSwiper5 from 'vue-swiper5'
// require styles
import 'swiper/css/swiper.css'
Vue.use(VueSwiper5, /* { default global options } */)
// require styles
import 'swiper/css/swiper.css'
import { swiper } from 'vue-swiper5'
export default {
components: {
swiper
}
}
import Swiper from 'swiper'
Swiper.use({
name: 'pluginName',
params: {
pluginSwitch: false,
},
on: {
init() {
if (!this.params.pluginSwitch) return
console.log('init')
},
// swiper callback...
}
})
<!-- The ref attr used to find the swiper instance -->
<template>
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<!-- slides -->
<template v-slot:items>
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</template>
<!-- Optional controls -->
<template v-slot:controls>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</template>
</swiper>
</template>
<script>
export default {
name: 'carrousel',
data() {
return {
swiperOption: {
// some swiper options/callbacks
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
mounted() {
// current swiper instance
console.log('this is current swiper instance object', this.swiper)
this.swiper.slideTo(3, 1000, false)
}
}
</script>
<template>
<swiper :options="swiperOption">
<template v-slot:items>
<div class="swiper-slide" v-for="(slide, index) in swiperSlides" :key="index">I'm Slide {{ slide }}</div>
</template>
<!-- Optional controls -->
<template v-slot:controls>
<div class="swiper-pagination"></div>
</template>
</swiper>
</template>
<script>
export default {
name: 'carrousel-items',
data() {
return {
swiperOption: {
pagination: {
el: '.swiper-pagination'
}
},
swiperSlides: [1, 2, 3, 4, 5]
}
},
mounted() {
setInterval(() => {
console.log('simulate async data')
if (this.swiperSlides.length < 10) {
this.swiperSlides.push(this.swiperSlides.length + 1)
}
}, 3000)
}
}
</script>
Swiper's API and configuration can be used.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。