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 相关文章推荐
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
js控制div弹出层实现方法
May 11 Javascript
Jquery轮播效果实现过程解析
Mar 30 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
layui实现文件或图片上传记录
Aug 28 Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 Javascript
基于JavaScript获取base64图片大小
Oct 18 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 Javascript
vant picker+popup 自定义三级联动案例
Nov 04 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完整的日历类(CLASS)
2006/11/27 PHP
一些PHP写的小东西
2006/12/06 PHP
MySQL授权问题总结
2007/05/06 PHP
PHP写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
PHP网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
JavaScript URL参数读取改进版
2009/01/16 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
jquery处理json对象
2014/11/03 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
jQuery实现本地存储
2020/12/22 jQuery
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
简单使用Python自动生成文章
2014/12/25 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
孩子教育的心得体会
2014/09/01 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python