您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
怎么在vue-cli webpack中引入swiper?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
1:下载需要 swiper 的js文件和css文件
http://www.swiper.com.cn/
2:下载好swiper相关的js和css,js放在static目录下,css放在assets目录下。
3:安装runtime:
npm install babel-runtime
4:修改.eslintrc.js文件如下: 最后一行添加
'globals': { "Swiper": true } //这个地方是新加入的 全局注入
5: vue模板中引入 swiper.min.js
import Swiper from '@/../static/js/swiper.min.js';
6: vue模板中引入 swiper-3.4.2.min.css
@import url("../../assets/css/swiper-3.4.2.min.css");
7: html 结构
<!-- Swiper --> <div class="home_banner"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="./../../assets/img/sec_3_top_2@2x.jpg"> </div> <div class="swiper-slide"> <img src="./../../assets/img/sec_3_top_2@2x.jpg"> </div> <div class="swiper-slide"> <img src="./../../assets/img/sec_3_top_2@2x.jpg"> </div> </div> </div> </div> <!-- Swiper end -->
8:vue js
mounted() { var mySwiper = new Swiper('.home_banner .swiper-container', { direction: 'horizontal', loop: true }); // Swiper 推荐课程 var swiper2 = new Swiper('.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 }); }
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。