vue轮播组件

最新推荐文章于 2025-06-25 11:11:50 发布

原创最新推荐文章于 2025-06-25 11:11:50 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

软件专栏收录该内容

1 篇文章

订阅专栏

npm安装轮播组件（和swiper几乎一样）:

npm install vue-awesome-swiper --save

spa单页应用页面代码

<!-- You can custom the "mySwiper" name used to find the swiper instance in current component -->
<template>
<div>
<!-- swiper -->
<swiper
:options="swiperOption">
<div 
class="swiper-slide" 
v-for="banner 
in banners">
<img 
:src="banner">
</div>
<div 
class="swiper-pagination" 
slot="pagination"></div>
</swiper>
</div>
</template>

<script>
require('swiper/dist/css/swiper.css')
import { swiper,
swiperSlide } from
'vue-awesome-swiper'
export default {
data () {
return {
banners: [ require('../assets/banner001.png'),
require('../assets/banner002.png'),
require('../assets/banner003.png') ],
swiperOption: { 
spaceBetween: 
30,
autoplay: {
delay: 3000,
stopOnLastSlide: 
false,
disableOnInteraction: 
false,
},
pagination: {
el: '.swiper-pagination',
clickable: true
}
}, 
}
},
components: {
swiper,
swiperSlide
},
computed: { 
// swiper() { 
// return this.$refs.mySwiper.swiper; 
// } 
},
mounted() {
}
}
</script>

<style
scoped>

.swiper-container{
width: 100%;
}
.swiper-slide img{
width: 100%;
}
</style>