vue2.0使用swiper组件实现轮播的示例代码


Posted in Javascript onMarch 03, 2018

1、安装swiper

npm install swiper@3.4.1 --save-dev

2、引用组件

import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';

3、html页面代码

<div class="swiper-container" id="swiper">
  <div class="swiper-wrapper">
   <div class="swiper-slide" v-for="(item,$index) in detail.imgs">
   <a v-on:click="showPreview($index,detail.imgs,swiperObj)">
    <figure class="wp-avatar banner">
    <img v-cloak :src="item | toQiNiuImg"/>
    </figure>
   </a>
   </div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
  </div>

4、初始化组件,并设置参数

setTimeout(function () {
  state.swiperObj = new Swiper('#swiper', {
  loop: true,
  pagination: '.swiper-pagination',
  autoplay: 2000,
  paginationClickable: true
  });
 }, 100)

5、搞定,ok

以上这篇vue2.0使用swiper组件实现轮播的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
jquery 插件学习(一)
Aug 06 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 Javascript
angularJS结合canvas画图例子
Feb 09 Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
javascript代码实现简易计算器
Jan 25 Javascript
Vue的轮播图组件实现方法
Mar 03 #Javascript
在Vue中使用Compass的方法
Mar 02 #Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 #Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 #Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 #Javascript
完美解决iview 的select下拉框选项错位的问题
Mar 02 #Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 #Javascript
You might like
PHP 单引号与双引号的区别
2009/11/24 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
jquery选择器简述
2015/08/31 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
vue中的ref和$refs的使用
2018/11/22 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
Python实现优先级队列结构的方法详解
2016/06/02 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
python截取两个单词之间的内容方法
2018/12/25 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
python之yield和Generator深入解析
2019/09/18 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
招商银行收入证明
2015/06/17 职场文书
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers
python如何查找列表中元素的位置
2022/05/30 Python