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 相关文章推荐
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
JSON与XML的区别对比及案例应用
Nov 11 Javascript
遍历json获得数据的几种方法小结
Jan 21 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
canvas红包照片实例分享
Feb 28 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 Javascript
react ant Design手动设置表单的值操作
Oct 31 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
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
yii2安装详细流程
2018/05/23 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
python获取目录下所有文件的方法
2015/06/01 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
Mac安装python3的方法步骤
2019/08/09 Python
PHP统计代码行数的小代码
2019/09/19 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
为什么说python适合写爬虫
2020/06/11 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
python 实现网易邮箱邮件阅读和删除的辅助小脚本
2021/03/01 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
教育专业个人求职信
2013/12/02 职场文书
安全标准化汇报材料
2014/02/03 职场文书
体育节口号
2014/06/19 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
初三英语教学计划
2015/01/23 职场文书
放飞理想主题班会
2015/08/14 职场文书