一、先说一个看关于vue-awesome-swiper的一个坑

vue项目的package.json中显示的"vue-awesome-swiper": "^2.5.4",用npm install自动安装依赖时装的版本为"version": "2.6.7"
       2.5.4与2.6.7都是基于swiper3的,从官网上swiper3的教程来看并不需要单独引入样式文件,而2.6.7版本需要单独引入swiper/dist/css目录下的swiper.css样式文件(类似于swiper4)。

并且2.6.7版本swiper位于node_modules/vue-awesome-swiper/node_modules下;2.5.4不需要单独引入样式文件,并且swiper直接位于node_modules文件夹下。

二、基本使用方法

1.安装(略)

2.引用

    /*全局引入*/
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'//这里注意具体看使用的版本是否需要引入样式,以及具体位置。
Vue.use(VueAwesomeSwiper, /* { default global options } */)
    /*组件方式引用*/
import 'swiper/dist/css/swiper.css'////这里注意具体看使用的版本是否需要引入样式,以及具体位置。
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
}

3.使用

就是一般组件的用法

    <swiper :options="swiperOption">
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
</swiper>
<!--以下看需要添加-->
<div class="swiper-scrollbar"></div> //滚动条
<div class="swiper-button-next"></div> //下一项
<div class="swiper-button-prev"></div> //上一项
<div class="swiper-pagination"></div> //标页码
  data(){
return{
swiperOption: {//swiper3
autoplay: 3000,
speed: 1000,
}
}
}

三、配置

参数 类型(swiper3) 默认值(swiper3) 类型(swiper4) 默认值(swiper4) 说明
autoplay Number/Boolean 0/false Object autoplay 自动切换
speed Number 300 Number 300 切换速度
loop Boolean false Boolean false loop模式
loopAdditionalSlides Number 0 Number 0 loop模式下会在slides前后复制若干个slide,,前后复制的个数不会大于原总个数。
loopedSlides Number 1 Number 1 在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。
direction String horizontal String horizontal Slides的滑动方向
autoplayDisableOnInteraction Boolean true - - 用户操作swiper之后,是否禁止autoplay
autoplayStopOnLast Boolean true - - 切换到最后一个slide时停止自动切换
grabCursor Boolean false Boolean false 鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状
width Number - Number - 强制Swiper的宽度
height Number - Number - 强制Swiper的高度
autoHeight Boolean false Boolean false 自动高度
freeMode:         swiper3/4 api相同
freeMode Boolean false - - free模式,slide会根据惯性滑动且不会贴合
freeModeMomentum Boolean true - - free模式动量。若设置为false则关闭动量,释放slide之后立即停止不会滑动。
freeModeMomentumRatio Number 1 - - free模式动量值(移动惯量)
freeModeMomentumVelocityRatio Number 1 - - 动量反弹
freeModeMomentumBounce Boolean true - - Slides的滑动方向
freeModeMomentumBounceRatio Number 1 - - 值越大产生的边界反弹效果越明显,反弹距离越大。
freeModeSticky Boolean false - - 使得freeMode也能自动贴合。
effect:         swiper3/4 api相同
effect String slide - - slide的切换效果。
fade/fadeEffect(4) Object fade - - fade效果参数。
cube/cubeEffect Object cube - - cube效果参数。
coverflow/coverflowEffect Object coverflow - - coverflow效果参数。
flip/flipEffect Object flip - - flip效果参数。
Zoom:          
zoom Boolean false Object zoom 焦距功能:双击slide会放大,并且在手机端可双指触摸缩放。
zoomMax Number 3 - - 最大缩放焦距(放大倍率).
zoomMin Number 1 - - 最小缩放焦距(缩小倍率)。
zoomToggle Boolean true - - 设置为false,不允许双击缩放,只允许手机端触摸缩放。
pagination:          
pagination String - Object pagination 分页器容器的css选择器或HTML标签
paginationType String - - - bullets’ 圆点(默认)‘fraction’ 分式 ‘progress’ 进度条‘custom’ 自定义
paginationClickable Boolean false - - 点击分页器的指示点分页器控制Swiper切换
paginationHide Boolean false - - 默认分页器会一直显示
paginationElement String span - - 设定分页器指示器(小点)的HTML标签。
Navigation Buttons:       swiper4 navigation  
nextButton string / HTMLElement - - - 前进按钮的css选择器或HTML元素。
prevtButton string / HTMLElement - - - 后退按钮的css选择器或HTML元素。
Scrollbar:          
scrollbar string / HTMLElement - Object swiper4 Scrollbar Scrollbar容器的css选择器或HTML元素
scrollbarHide Bolean true - - 滚动条是否自动隐藏。
scrollbarDraggable Boolean false - - 该参数设置为true时允许拖动滚动条。
scrollbarSnapOnRelease Boolean false - - 如果设置为true,释放滚动条时slide自动贴合。

autoplay:

  autoplay: {
delay: 3000, //自动切换的时间间隔,单位ms
stopOnLastSlide: false, //当切换到最后一个slide时停止自动切换
stopOnLastSlide: true, //如果设置为true,当切换到最后一个slide时停止自动切换。
disableOnInteraction: true, //用户操作swiper之后,是否禁止autoplay。
reverseDirection: true, //开启反向自动轮播。
waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时。
},

fade:

  fadeEffect: {
crossFade: false,
}

cube:

  cubeEffect: {
slideShadows: true, //开启slide阴影。默认 true。
shadow: true, //开启投影。默认 true。
shadowOffset: 100, //投影距离。默认 20,单位px。
shadowScale: 0.6 //投影缩放比例。默认0.94。
},

coverflow:

  coverflowEffect: {
rotate: 30, //slide做3d旋转时Y轴的旋转角度。默认50。
stretch: 10, //每个slide之间的拉伸值,越大slide靠得越紧。 默认0。
depth: 60, //slide的位置深度。值越大z轴距离越远,看起来越小。 默认100。
modifier: 2, //depth和rotate和stretch的倍率,相当于depth*modifier、rotate*modifier、stretch*modifier,值越大这三个参数的效果越明显。默认1。
slideShadows : true //开启slide阴影。默认 true。
},

flip:

   flipEffect: {
slideShadows : true, //slides的阴影。默认true。
limitRotation : true, //限制最大旋转角度为180度,默认true。
}

zoom:

   zoom: {
maxRatio: 5, //最大倍数
minRatio: 2, //最小倍数
toggle: false, //不允许双击缩放,只允许手机端触摸缩放。
containerClass: 'my-zoom-container', //zoom container 类名
},

navigation:

   navigation: {
nextEl: '.swiper-button-next', //前进按钮的css选择器或HTML元素。
prevEl: '.swiper-button-prev', //后退按钮的css选择器或HTML元素。
hideOnClick: true, //点击slide时显示/隐藏按钮
disabledClass: 'my-button-disabled', //前进后退按钮不可用时的类名。
hiddenClass: 'my-button-hidden', //按钮隐藏时的Class
},

pagination:

   pagination: {
el: '.swiper-pagination',
type: 'bullets',
//type: 'fraction',
//type : 'progressbar',
//type : 'custom',
progressbarOpposite: true, //使进度条分页器与Swiper的direction参数相反
bulletElement : 'li', //设定分页器指示器(小点)的HTML标签。
dynamicBullets: true, //动态分页器,当你的slide很多时,开启后,分页器小点的数量会部分隐藏。
dynamicMainBullets: 2, //动态分页器的主指示点的数量
hideOnClick: true, //默认分页器会一直显示。这个选项设置为true时点击Swiper会隐藏/显示分页器。
clickable: true, //此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换。 },

Scrollbar:

 
   scrollbar: {
el: '.swiper-scrollbar',
hide: true, //滚动条是否自动隐藏。默认:false,不会自动隐藏。
draggable: true, //该参数设置为true时允许拖动滚动条。
snapOnRelease: true, //如果设置为false,释放滚动条时slide不会自动贴合。
dragSize: 30, //设置滚动条指示的尺寸。默认'auto': 自动,或者设置num(px)。
},

vue-awesome-swiper的使用以及API整理的更多相关文章

  1. canvas学习之API整理笔记(二)

    前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...

  2. HTML5 <Audio/>标签Api整理(二)

    1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...

  3. Elasticsearch Java Rest Client API 整理总结 (二) —— SearchAPI

    目录 引言 Search APIs Search API Search Request 可选参数 使用 SearchSourceBuilder 构建查询条件 指定排序 高亮请求 聚合请求 建议请求 R ...

  4. Elasticsearch Java Rest Client API 整理总结 (三)——Building Queries

    目录 上篇回顾 Building Queries 匹配所有的查询 全文查询 Full Text Queries 什么是全文查询? Match 全文查询 API 列表 基于词项的查询 Term Term ...

  5. HTML5 <Audio>标签API整理(三)

    一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...

  6. 【转】Bootstrap FileInput中文API整理

    Bootstrap FileInput中文API整理 这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档, ...

  7. Bootstrap FileInput 上传 中文 API 整理

    Bootstrap FileInput 上传  中文 API 整理 上传插件有很多 但是公司用的就是 Bootstrap FileInput 自己就看了看  会用就行 自己都不知道每个值是干嘛用的就问 ...

  8. qq开放平台可以应用到网页游戏的api整理

    创建角色界面api整理 一.需求描述 1.  创建角色名称可以用qq空间昵称代替 2.  如果玩家是在新区玩的话,赠送老玩家支持礼包 3.  可以看到,好友xxx也在玩,而且到了多少等级,如果加为好友 ...

  9. vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

    vue引入swiper  vue使用swiper  vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...

  10. OpenLayers API整理

    整理的Openlayers 的知识笔记,随着运用不断加深理解,也会不断更新. 本文链接:Openlayers API整理 作者:狐狸家的鱼 GitHub:八至 一.创建地图 1.地图Map 创建地图底 ...

随机推荐

  1. SSO 单点登录简单流程(cas)

    配置服务端(链接数据库) 第一步: 下载cas-server端,解压开, 将中的解压开,将该包中的内容放入cas文件夹(新建文件夹)中 然后将这个文件夹放入到服务端的服务器(tomcat)中 将解压开 ...

  2. Redis性能调优建议

    一. Redis部署结构优化建议 1. Master不做AOF或RDB持久化,Slave做AOF持久化,建议同时做RDB持久化 2. 所有Master全部增加Slave 3. Master挂载Slav ...

  3. es6 - foreach

    foreach ... // es5 - foreach arr.forEach(function(value, index, arr) { console.log(value, index, arr ...

  4. AudioSession/AudioCaptureSession的分析与使用

    这个是AudioSession的结构图: 前一个部分已经介绍了AVFoundation对音频录制.播放的一种方法,以下再介绍第二种: AVCaptureSession 用这个类的长处在什么地方呢? ( ...

  5. TP多条件查询

    $stcount = M("Results_all")->alias('a') ->join("s_test_name as b on a.subject = ...

  6. 环信ONE SDK架构介绍

    环信ONE SDK架构介绍 摘要 环信即时通讯SDK自2014年6月正式公布2.0版本号至今已走过一个年头.从主要的单聊功能,到群聊功能,再到聊天室的实现.SDK无论是功能.稳定性,还是易集成性都在一 ...

  7. mysql报错1872: Slave failed to initialize relay log info structure from the repository

    ERROR 1872 (HY000): Slave failed to initialize relay log info structure from the repository 在一台主机上增加 ...

  8. hint指定index的深入理解

    http://czmmiao.iteye.com/blog/1480247创建一个表,含有位图index和b-tree index SQL> create table t as select o ...

  9. Struts2学习三----------Action搜索顺序

    © 版权声明:本文为博主原创文章,转载请注明出处 Struts2的Action的搜索顺序 http://localhost:8080/path1/path2/student.action 1)判断pa ...

  10. MVC初了解

    MVC:Model-View-Controller,将数据和显示形式分离. Model:能够看做是三层中的D层+B层,实现业务逻辑和与数据库的交互. View:看做是U层,用来显示数据. Contro ...