vue-awesome-swiper 的使用

 在Vue项目中如何实现轮播图的效果呢，在传统项目中第一个想到的一般都是swiper插件，代码简单好用。一开始我也是直接npm安装swiper然后照着之前的传统写法写，然而却没有效果，只会显示图片但没有轮播效果。上网查了很多资料也参考其他同行的做法，跟着改但是还是没效果。后来发现vue是有一个专门的轮播插件：vue-awesome-swiper，下面介绍如何用这个插件实现轮播效果：

1.安装 vue-awesome-swiper

github地址：https://github.com/surmon-china/vue-awesome-swiper

npm install vue-awesome-swiper --save

2.引用

引入 vue-awesome-swiper 的两种方式

• 全局引入

可以直接使用全局引入，引入代码如下：

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

• 以组件形式引入

这种方式是在需要的页面以component 的形式引入，好处就是依赖性不强。

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	自动高度
<span style=“color:red;font-size: 20px;”>freeMode:</span>					<span style=“color:red;”>swiper3/4 api相同</span>
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也能自动贴合。
<span style=“color:red;font-size: 20px;”>effect:</span>					<span style=“color:red;”>swiper3/4 api相同</span>
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效果参数。
<span style=“color:red;font-size: 20px;”>Zoom:</span>
zoom	Boolean	false	Object	zoom	焦距功能：双击slide会放大，并且在手机端可双指触摸缩放。
zoomMax	Number	3	-	-	最大缩放焦距（放大倍率）.
zoomMin	Number	1	-	-	最小缩放焦距（缩小倍率）。
zoomToggle	Boolean	true	-	-	设置为false，不允许双击缩放，只允许手机端触摸缩放。
<span style=“color:red;font-size: 20px;”>pagination:</span>
pagination	String	-	Object	pagination	分页器容器的css选择器或HTML标签
paginationType	String	-	-	-	bullets’ 圆点（默认）‘fraction’ 分式 ‘progress’ 进度条‘custom’ 自定义
paginationClickable	Boolean	false	-	-	点击分页器的指示点分页器控制Swiper切换
paginationHide	Boolean	false	-	-	默认分页器会一直显示
paginationElement	String	span	-	-	设定分页器指示器（小点）的HTML标签。
<span style=“color:red;font-size: 20px;”>Navigation Buttons:</span>				swiper4 navigation
nextButton	string / HTMLElement	-	-	-	前进按钮的css选择器或HTML元素。
prevtButton	string / HTMLElement	-	-	-	后退按钮的css选择器或HTML元素。
<span style=“color:red;font-size: 20px;”>Scrollbar:</span>
scrollbar	string / HTMLElement	-	Object	swiper4 Scrollbar	Scrollbar容器的css选择器或HTML元素
scrollbarHide	Bolean	true	-	-	滚动条是否自动隐藏。
scrollbarDraggable	Boolean	false	-	-	该参数设置为true时允许拖动滚动条。
scrollbarSnapOnRelease	Boolean	false	-	-	如果设置为true，释放滚动条时slide自动贴合。

更多参数查看  https://www.javascriptcn.com/read-31069.html