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 相关文章推荐
拖动一个HTML元素
Dec 22 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
js友好的时间返回函数
Aug 24 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
React中的refs的使用教程
Feb 13 Javascript
Vue 源码分析之 Observer实现过程
Mar 29 Javascript
Vue.use源码学习小结
Jun 20 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 Javascript
微信小程序实现带放大效果的轮播图
May 26 Javascript
JavaScript实现打字游戏
Feb 19 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 如何向 MySQL 发送数据
2006/10/09 PHP
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
深入PHP与浏览器缓存的分析
2013/06/03 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
javascript中的new使用
2010/03/20 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
js图片预加载示例
2014/04/30 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
python创建列表并给列表赋初始值的方法
2015/07/28 Python
Python的Flask框架中集成CKeditor富文本编辑器的教程
2016/06/13 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
计算机专业毕业生推荐信
2013/11/25 职场文书
献爱心活动总结
2014/05/07 职场文书
环境保护标语
2014/06/20 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
房产证明范本
2015/06/19 职场文书
css3实现的加载动画效果
2021/04/07 HTML / CSS
MySQL为id选择合适的数据类型
2021/06/07 MySQL
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技
nginx容器方式反向代理实战
2022/04/18 Servers