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


Posted in Javascript onSeptember 15, 2018

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
 });
 }

以上这篇vue-cli webpack 引入swiper的操作方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript getElementsByTagName
Jan 31 Javascript
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
js获取内联样式的方法
Jan 27 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 Javascript
深入浅析AngularJS中的module(模块)
Jan 04 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 #Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 #Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 #Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 #Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 #Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 #Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 #Javascript
You might like
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
apycom出品的jQuery精美菜单破解方法
2011/02/18 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
复习Python中的字符串知识点
2015/04/14 Python
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
SVM基本概念及Python实现代码
2017/12/27 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
烹调加工管理制度
2014/02/04 职场文书
写景作文评语集锦
2014/12/25 职场文书
英文邀请函
2015/02/02 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
环保证明
2015/06/23 职场文书
运动会入场词
2015/07/18 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
python数字图像处理之对比度与亮度调整示例
2022/06/28 Python