vue 中swiper的使用教程


Posted in Javascript onMay 22, 2018

Install

在vue cli下的使用

npm

install vue-awesome-swiper --save

在main.js中

import  VueAwesomeSwiper from 'vue-awesome-swiper'
import  'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

在component.vue中

<template>
<div id="container">
 <swiper :options="swiperOption" ref="mySwiper">
  <swiper-slide class="swiper-slide games">
   <img src="/src/assets/LB/LB_07.jpg" alt="">
  </swiper-slide>
  <swiper-slide class="swiper-slide games">
   <img src="/src/assets/LB/LB_06.jpg" alt="">
  </swiper-slide>
  <swiper-slide class="swiper-slide games">
   <img src="/src/assets/LB/LB_05.jpg" alt="">
  </swiper-slide>
  <swiper-slide class="swiper-slide games">
   <img src="/src/assets/LB/LB_04.jpg" alt="">
  </swiper-slide>
  <div class="swiper-pagination" slot="pagination"></div>
  <div class="swiper-button-prev" slot="button-prev"></div>
  <div class="swiper-button-next" slot="button-next"></div>
 </swiper>   
 </div> 
 </template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
 export default {
  name: 'carrousel',
  data () {
   return {
    swiperOption: {
        autoplay : {
      disableOnInteraction: false, //用户操作后是否禁止自动循环
      delay: 3000 //自自动循环时间
     }, //可选选项,自动滑动
     speed: 2000, //切换速度,即slider自动滑动开始到结束的时间(单位ms)
     loop:true, //循环切换
     grabCursor: true, //设置为true时,鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状
     // setWrapperSize: true, //Swiper使用flexbox布局(display: flex),开启这个设定会在Wrapper上添加等于slides相加的宽或高,在对flexbox布局的支持不是很好的浏览器中可能需要用到。
     autoHeight: true,   //自动高度。设置为true时,wrapper和container会随着当前slide的高度而发生变化。   
     scrollbar: '.swiper-scrollbar',
     mousewheelControl: true, //设置为true时,能使用鼠标滚轮控制slide滑动
     observeParents: true, //当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper

     pagination: {
      el: '.swiper-pagination',
      // type : 'progressbar', //分页器形状
      clickable :true, //点击分页器的指示点分页器会控制Swiper切换
     },
     navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
     },       
   },
   computed: {
    swiper() {
     return this.$refs.mySwiper.swiper
    }
   }
  }
 }
}
</script>
<style scoped>
img {
 width: 100%;
 height: auto;
}
</style>

参考:https://github.com/surmon-china/vue-awesome-swiper

https://surmon-china.github.io/vue-awesome-swiper/

总结

以上所述是小编给大家介绍的vue 中swiper的使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
js实现rem自动匹配计算font-size的示例
Nov 18 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
改变layer confirm弹窗按钮的颜色方法
Sep 12 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 Javascript
vue配置多页面的实现方法
May 22 #Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 #Javascript
详解js类型判断
May 22 #Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 #Javascript
swiper 自动图片无限轮播实现代码
May 21 #Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 #Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 #jQuery
You might like
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
php中smarty变量修饰用法实例分析
2015/06/11 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
python判断自身是否正在运行的方法
2019/08/08 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
Python requests上传文件实现步骤
2020/09/15 Python
python搜索算法原理及实例讲解
2020/11/18 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
旅游管理毕业生自荐信范文
2014/03/19 职场文书
公司委托书格式范文
2014/04/04 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
住房租房协议书
2014/08/20 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android
详解JAVA的控制语句
2021/11/11 Java/Android
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python
部分武汉产收音机展览
2022/04/07 无线电