轮播组件vue

<swiper :options="swiperOption" class='swiper-box'>
    <swiper-slide v-for="v in swipers"><img :src="v.fdcImage" class="swiper-img"style="width:100%;height:1.8rem"></swiper-slide>
   <div class="swiper-pagination" slot="pagination"></div>

</swiper>

安装

npm install vue-awesome-swiper --save

首先在main.js引入

   import VueSwiper from 'vue-awesome-swiper'
   Vue.use(VueSwiper)
 
然后就可以用了:
 
  mounted () {
            setTimeout(() => {
                this.asyncCount = 5
            }, 1000)
        },
        data () {
            return {
              
                swiperOption: {
                    autoplay: 3000,
                    pagination: '.swiper-pagination',
                    autoplayDisableOnInteraction: false,
                    loop: true
                },
             swipers:[]
    }
        }
vue-awesome-swiper的API文档:

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

vue项目的package.json中显示的"vue-awesome-swiper": "^2.5.4",用npm install自动安装依赖时装的版本为"version": "2.6.7",而单独安装(npm install vue-awesome-swiper@2.5.4)的则是正常的"version": "2.5.4"。

这两个版本都是基于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.引用

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

3.使用

就是一般组件的用法

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

三、配置

参数 类型(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:

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

fade:

  1.  fadeEffect: {
  2.  crossFade: false,
  3.  }

cube:

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

coverflow:

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

flip:

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

zoom:

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

navigation:

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

pagination:

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

Scrollbar:

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

vue轮播(完整详细版)的更多相关文章

  1. SpringBoot整合Mybatis完整详细版二:注册、登录、拦截器配置

    接着上个章节来,上章节搭建好框架,并且测试也在页面取到数据.接下来实现web端,实现前后端交互,在前台进行注册登录以及后端拦截器配置.实现简单的未登录拦截跳转到登录页面 上一节传送门:SpringBo ...

  2. SpringBoot整合Mybatis完整详细版

    记得刚接触SpringBoot时,大吃一惊,世界上居然还有这么省事的框架,立马感叹:SpringBoot是世界上最好的框架.哈哈! 当初跟着教程练习搭建了一个框架,传送门:spring boot + ...

  3. Java学习路线(完整详细版)

    Java学习路线(完整详细版) https://jingyan.baidu.com/article/c1a3101e110864de656deb83.html

  4. vue轮播,展示pdf

    vue轮播,展示pdf 根据左侧图片格式,右侧展示相应的pdf文件与图片.(vue中不支持pdf格式,pdf文件要放在static文件里):代码如下: <template> <!-- ...

  5. [02-01]Java学习路线(完整详细版)

    Java基础课程 Java基础课程内容涉及:Java开发介绍.Java数组.Java面向对象.常用基础类.集合.IO流.多线程.异常.网络.反射. 第一阶段:Java基础 1 第一部分:Java开发介 ...

  6. 做一个vue轮播图组件

    根据huangyi老师的慕课网vue项目跟着做的,下面大概记录了下思路 1.轮播图的图 先不做轮播图逻辑部分,先把数据导进来,看看什么效果.在recommend组件新建一个recommends的数组, ...

  7. vue轮播组件及去掉路由#

    最近公司要我去实现vue知识的系统讲解,总结一番,大致需要7节课,今天大致说一下我们使用vue需要学会的基本技能.vue是一个渐进性视图渲染框架,使用vue核心是数据出发,数据一般是我们前台从后台获取 ...

  8. vue轮播图实现

    1.先安装组件 cnpm install vue-awesome-swiper; 2.在main.js下引入文件: import VueAwsomeSwiper from 'vue-awesome-s ...

  9. vue轮播图插件vue-awesome-swiper的使用与组件化

    不管是APP还是移动端网页开发,轮播图在大部分项目当中都是存在的,这时候如果用vue开发项目,选择一款好的插件并且封装好是很重要的 1. 推荐使用vue-awesome-swiper 安装:cnpm ...

随机推荐

  1. Codeforces Round #418 (Div. 2)D

    给n个圆要么包含,要么相分离,没有两个公共点,当成一棵树,把包含的面积大的放在上面 如图最上面的par记为-1,level记为0,当par==-1||level==1时就加否则减, 就是第一,二层先加 ...

  2. UVALive-2531 The K-League (最大流建模+枚举)

    题目大意:有n支足球队,已知每支球队的已胜场数和任意两支球队之间还需要的比赛场数a[i][j],求最终可能夺冠的所有球队. 题目分析:枚举所有的球队,对于球队 i 让它在接下来的比赛中全部获胜,如果这 ...

  3. MsWord 操作总结

    转自(http://www.cnblogs.com/eye-like/p/4121219.html) Msdn上的word操作api(不过只有英文版,英文差的先闪过) Word2007的API:htt ...

  4. zookeeper和Kafka集群安装配置

    3个虚拟机,首先关闭防火墙,在进行下面操作 一.java环境 yum list java* yum -y install java-1.8.0-openjdk* 查看Java版本 Java -vers ...

  5. PHP网站自动化配置的实现

    一直都在用yii2做项目,有在用自动化配置,但是没有自己去配置过.中午没事去看了下yii的初始化代码,发现都是php而已! yii2初始化项目代码 所以,我们做项目肯定是可以用php做的,于是我新建了 ...

  6. 流程设计器jQuery + svg/vml(Demo1 - 构建设计器UI界面)

    之前用Silverlight实现过一个流程设计器(Demo),使用起来不是很方便.打算参考GooFlow,结合自己对工作流的理解,用jQuery改造实现一个,力求简单实用. 第一步是要构建设计器的UI ...

  7. L185 Ocean Shock

    This is part of "Ocean Shock," a Reuters series exploring climate change's impact on sea c ...

  8. 在mysql中,如何改变列声明.

    C 在mysql中,如何改变列声明. 修改表 - 修改列名 使用 CHANGE COLUMN 来修改列的名字,还必须 设置 列的数据类型 mysql> desc test_tab -> / ...

  9. POI2010题解

    POI2010题解 我也不知道我为什么就开始刷POI了 有些题目咕掉了所以不完整(我都不知道POI到底有多少题) [BZOJ2079][Poi2010]Guilds (貌似bz跟洛谷上的不是一个题?) ...

  10. 常见web安全攻防总结

    Web 安全的对于 Web 从业人员来说是一个非常重要的课题 , 所以在这里总结一下 Web 相关的安全攻防知识,希望以后不要再踩雷,也希望对看到这篇文章的同学有所帮助.今天这边文章主要的内容就是分析 ...