标签：position ati rom action lse wrap htm nat return
为啥要耽误说下载的版本号来，因为swiper在6.x的版本使用实在很头疼，所有下载的时候指定下载版本为5.x的
下载命令 ：
mpn install swiper@5.3.6 --save
在main.js中引入：
//swiper引入js、css import ‘swiper/js/swiper.min‘ import ‘swiper/css/swiper.min.css‘
在.vue页面中使用：
<template>
<div class="box">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" >
<img :src="require(‘../../assets/img/Ctom1.jpg‘)"/>
</div>
<div class="swiper-slide" >
<img :src="require(‘../../assets/img/Ctom2.jpg‘)"/>
</div>
<div class="swiper-slide" >
<img :src="require(‘../../assets/img/error404.png‘)"/>
</div>
</div>
<div class="swiper-pagination"></div>
<!--分页器。如果放置在swiper-container外面，需要自定义样式。-->
</div>
</div>
</template>
<script>
import Swiper from "swiper"; //引入swiper依赖
export default {
data() {
return {
};
},
methods: {
//封装轮播函数
getBanner() {
//调用延迟加载 $nextTick
this.$nextTick(() => {
let swiper = new Swiper(".swiper-container", {
//是否循环
loop: true,
autoplay: {
//swiper手动滑动之后自动轮播失效的解决方法,包括触碰，拖动，点击pagination,重新启动自动播放
disableOnInteraction: false,
// 自动播放时间：毫秒
delay: 5000
},
pagination: {
//小圆点
el: ".swiper-pagination"
}
});
});
},
},
mounted() {
this.getBanner(); //轮播
}
};
</script>
<style lang="stylus" scoped>
.box
position absolute
width 100%
height 100%
background red
.swiper-container
border 1px solid #0f0
width 600px
img
width 600px
height 400px
</style>
https://www.cnblogs.com/enhengenhengNymph/p/14172595.html
标签：position ati rom action lse wrap htm nat return
原文地址：https://www.cnblogs.com/enhengenhengNymph/p/14172669.html
