1:下载需要 swiper 的js文件和css文件
http://www.swiper.com.cn/
2:下载好swiper相关的js和css,js放在static目录下,css放在assets目录下。
3:安装runtime:
npminstallbabel-runtime
4:修改.eslintrc.js文件如下: 最后一行添加
'globals': {"Swiper":true}//这个地方是新加入的 全局注入
5: vue模板中引入 swiper.min.js
importSwiperfrom'@/../static/js/swiper.min.js';
6: vue模板中引入 swiper-3.4.2.min.css
@importurl("../../assets/css/swiper-3.4.2.min.css");
7: html 结构
8:vue js
mounted() {varmySwiper=newSwiper('.home_banner .swiper-container', {
direction:'horizontal',loop:true
});
varswiper2=newSwiper('.course_swiper_wrap .swiper-container', {
slidesPerView:3,
paginationClickable:true,
nextButton:'.swiper-button-next-01',
prevButton:'.swiper-button-prev-01',
spaceBetween:30,
freeMode:true,loop:true
});
}