好资源导航 » 文章资讯 » vue-cli webpack 引入swiper的操作方法

vue-cli webpack 引入swiper的操作方法

2023-09-08 04:33:05 64

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：vuejs

mounted(){
varmySwiper=newSwiper('.home_banner.swiper-container',{
direction:'horizontal',
loop:true
});
//Swiper推荐课程
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
});
}

以上这篇vue-cliwebpack引入swiper的操作方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

vue-cli webpack 引入swiper的操作方法

热门推荐

随机推荐