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 相关文章推荐
用函数式编程技术编写优美的 JavaScript_ibm
May 16 Javascript
extjs3 combobox取value和text案例详解
Feb 06 Javascript
javascript三种代码注释方法
Jun 02 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
js+html5生成自动排列对话框实例
Oct 09 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 Javascript
koa-passport实现本地验证的方法示例
Feb 20 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
Apr 08 Javascript
js利用iframe实现选项卡效果
Aug 09 Javascript
原生js实现移动小球(碰撞检测)
Dec 17 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
php数组合并的二种方法
2014/03/21 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
python实现连接mongodb的方法
2015/05/08 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
华润集团网上药店:健一网
2016/09/19 全球购物
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
小学毕业感言500字
2014/02/28 职场文书
房屋出租协议书
2014/04/10 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
2015年母亲节寄语
2015/03/23 职场文书
在Django中使用MQTT的方法
2021/05/10 Python