标签:attribute 地方 循环播放 import rom tag 格式 pre rip
局部引用示例:
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>
标签:attribute 地方 循环播放 import rom tag 格式 pre rip
原文地址:https://www.cnblogs.com/a973692898/p/13204091.html