使用该插件应该现在cmd中输入:npm install vue-awesome-swiper --save
代码如下:
<template>
<div class="HeadRotation">
<!-- 列表轮播图 -->
<div class="swiper-container qwe">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img :src="image" alt="图片未加载">
</div>
<div class="swiper-slide">
<img :src="image1" alt="图片未加载">
</div>
<!--如果轮播图里放什么图版不确定,就使用 <slot></slot> 作为插槽-->
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination paging"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
</div>
</div>
</template>
<script> //局部引入swiper插件
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
export default {
name: "HeadRotation",
data () {
return {
image: require("../../assets/images/img_banner.jpg"),
image1: require("../../assets/images/img_banner1.jpg")
}
},
mounted() {
new Swiper ('.qwe', {
loop: true, // 循环模式选项
autoplay: true,//自动循环
// 如果需要分页器
pagination: {
el: '.paging',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
// scrollbar: {
// el: '.swiper-scrollbar',
// },
})
},
};
</script>
<style lang="scss" scoped>
.banner {
width: 100%;
}
.swiper-slide img {
width: 100%;
min-width: 1200px;
height: 100%;
}
</style>