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的document.all函数使用示例
Dec 30 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
JS实现键值对遍历json数组功能示例
May 30 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 Javascript
Vue基于iview table展示图片实现点击放大
Aug 05 Javascript
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
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简单命令代码集锦
2007/09/24 PHP
php socket方式提交的post详解
2008/07/19 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
python爬虫增加访问量的方法
2019/08/22 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
医院实习介绍信
2014/01/12 职场文书
物业管理工作方案
2014/05/10 职场文书
《学会看病》教学反思
2016/02/17 职场文书
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技