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 相关文章推荐
jquery.ui.draggable中文文档
Nov 24 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
Oct 29 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
vue总线机制(bus)知识点详解
May 10 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
域名查询代码公布
2006/10/09 PHP
使用 php4 加速 web 传输
2006/10/09 PHP
php自定文件保存session的方法
2014/12/10 PHP
php通过文件流方式复制文件的方法
2015/03/13 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
Python中for循环详解
2014/01/17 Python
Python实现学生成绩管理系统
2020/04/05 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
日语求职信范文
2013/12/17 职场文书
入职担保书怎么写
2014/05/12 职场文书
理发店策划方案
2014/06/05 职场文书
业务员岗位职责范本
2015/04/03 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
大学生支教感言
2015/08/01 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书