轮播图swiper5第三方插件的使用

Posted 2020-12-13 a973692898

局部引用示例：

　　

1.首先，先进行下载安装
　　命令：    npm install --save swiper

 

2.在局部页面中引入（一般用于首页）
　　
　　注：vue项目哦
//-----------------------------------------------------------html代码----------------------------------------------------------
写的有点过于简陋，不过主要就是这个格式
　　<div class="swiper-container">
　　　　<div class="swiper-wrapper">
　　　　　　<div class="swiper-slide">Slide 1</div>
　　　　　　<div class="swiper-slide">Slide 2</div>
　　　　</div>
　　　　<div class="swiper-pagination"></div>
　　</div>

//-----------------------------------------------------------js代码------------------------------------------------------------
　　<script>
　　　　//引入swiper
　　　　import Swiper from "swiper"
　　　　//引入swiper样式--------------不一定都一样（请去node_modules中的swiper中自行查看路径）
　　　　import "swiper/css/swiper.min.css"
　　　　//下方就是例子了，我这个是home页面
　　　　export default{
　　　　　　name:‘Home‘,
　　　　　　//注册组件的地方
　　　　　　components:{},
　　　　　　//dom渲染后的生命周期钩子函数
　　　　　　mounted(){
　　　　　　　　//创建一个swiper实例对象，来实现轮播
　　　　　　　　new Swiper(‘.swiper-container‘,{
　　　　　　　　　　loop:true, //循环轮播
　　　　　　　　　　pagination:{//分页器
　　　　　　　　　　　　el:‘.swiper-pagination‘
　　　　　　　　　　},
　　　　　　　　　　autoplay:{
　　　　　　　　　　　　stopOnLastSlide:true,//开启自动循环播放
　　　　　　　　　　　　delay：3000//设置轮播时间
　　　　　　　　　　}
　　　　　　　　})
　　　　　　}
　　　　}　　　　
　　</script>