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模板技术
Apr 27 Javascript
Javascript 跨域访问解决方案
Feb 14 Javascript
javascript 遍历验证所有文本框的值
Aug 27 Javascript
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
JQuery之focus函数使用介绍
Aug 20 Javascript
JS去除数组重复值的五种不同方法
Sep 06 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
Oct 25 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
React-Native中props具体使用详解
Sep 04 Javascript
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
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
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
详解js类型判断
2018/05/22 Javascript
JavaScript事件对象深入详解
2018/12/30 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
python实现一个猜拳游戏
2020/04/05 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
材料加工硕士生求职信
2013/10/10 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
校园环保建议书
2014/05/14 职场文书
品牌推广策划方案
2014/05/28 职场文书
党员教师一句话承诺
2014/05/30 职场文书
体育教师个人工作总结
2015/02/09 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
Python使用DFA算法过滤内容敏感词
2022/04/22 Python