vue-awesome-swiper的用法
时间:2019-01-11
本文章向大家介绍vue-awesome-swiper的用法,主要包括vue-awesome-swiper的用法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
vue框架的轮播图插件vue-awesome-swiper
- 安装
npm install vue-awesome-swiper --save
- 引入
/*全局引入*/
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
/*组件方式引用*/
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
}
}
- 使用
<swiper :options="swiperOption" ref="mySwiper">
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<swiper-slide>I'm Slide 4</swiper-slide>
<!-- Optional controls以下按需使用 -->
<div class="swiper-pagination " slot="pagination"></div> <!--分页-->
<div class="swiper-button-prev swiper-button-black" slot="button-prev"></div> <!--上一项-->
<div class="swiper-button-next swiper-button-black" slot="button-next"></div> <!--下一项-->
<div class="swiper-scrollbar" slot="scrollbar"></div> <!--滚动条-->
</swiper>
data(){
return{
swiperOption: {
notNextTick: true,
//循环
loop:true,
//设定初始化时slide的索引
initialSlide:0,
//自动播放
autoplay:true,
// 设置轮播
effect : 'flip',
//滑动速度
speed:800,
//滑动方向
direction : 'horizontal',
//小手掌抓取滑动
grabCursor : true,
//滑动之后回调函数
on: {
slideChangeTransitionEnd: function(){
// console.log(this.activeIndex);//切换结束时,告诉我现在是第几个slide
},
},
//左右点击
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
//分页器设置
pagination: {
el: '.swiper-pagination',
clickable :true
}
}
}
},
components: {
swiper,
swiperSlide
}
具体的swiper设置属性可以查看中文API文档:http://www.swiper.com.cn/api
- 【Java学习笔记之七】java函数的语法规则总结
- BZOJ 3038: 上帝造题的七分钟2【线段树区间开方问题】
- BZOJ 3211: 花神游历各国【线段树区间开方问题】
- WP、Win10开发或者WPF开发时绘制自定义窗体~例如:一个手机
- 【Java学习笔记之八】JavaBean中布尔类型使用注意事项
- BZOJ 1597: [Usaco2008 Mar]土地购买【斜率优化+凸包维护】
- BZOJ 1046: [HAOI2007]上升序列【贪心+二分状态+dp+递归】
- 【Java学习笔记之九】java二维数组及其多维数组的内存应用拓展延伸
- BZOJ 1293: [SCOI2009]生日礼物【单调队列】
- Javascript缓存投毒学习与实战
- 【Java学习笔记之十】Java中循环语句foreach使用总结及foreach写法失效的问题
- Codeforces 839B Game of the Rows【贪心】
- Codeforces 839A Arya and Bran【暴力】
- 【Java学习笔记之十一】Java中常用的8大排序算法详解总结
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 17 . Go之网络编程
- 01 . Go框架之Beego简介部署及程序流程分析
- 服务器入侵排查流程
- Nginx配置各种响应头防止XSS,点击劫持,frame恶意攻击
- Redis一站式管理平台工具,支持集群创建,管理,监控,报警
- Go操作Redis
- 腾讯蓝鲸自动化运维平台简介部署及常见报错解决
- 07 . ELK Stack7.2一键多机部署脚本
- Kibana配置nginx反代并本地ca加密nginx
- Nginx WebUI管理
- Go之Gorm和BeegoORM简介及配置使用
- msyscuione:基于msys的一体化CUI开发生产环境,支持qt,llvm,ros集成常见web appstack
- monosys as 1ddlang语言选型+1ddcodebase实践选型绿色monodevelope集成常见多语言
- hostguest nativelangsys及uniform cui cross compile system
- 写好 JS 条件语句的 5 条守则