vue-awesome-swiper基本使⽤及参数说明
1、安装
npm install  vue-awesome-swiper
cnpm inatall vue-awesome-swiper
2.引⼊
全局引⼊：
import vueSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'  //引⼊样式
组件⽅式引⼊：
import { swiper, swiperSlide } from "vue-awesome-swiper";
require("swiper/dist/css/swiper.css");
components: {
swiper,
swiperSlide
},
3.案例：
<template>
<div class="commodity">
<div class="container">
<swiper class='swiImgs' :options="swiperOption" v-if="commodity.length!=0">
<swiper-slide v-for="(item, index) in commodity" data-index="index" :key="index" class="item">
<img class='swiImg' :src='item' />
</swiper-slide>
<div class="swiper-scrollbar"></div> //滚动条
<div class="swiper-button-next"></div> //下⼀页
<div class="swiper-button-prev"></div> //上⼀页
<div class="swiper-pagination" v-for="(item,index) in detailimages" :key="index" slot="pagination"></div>
</swiper>
<span class='swiText' v-if='commodity'>{{imgIndex}}/{{commodity.length}}</span>
</div>
</div>
</template>
<script>
export default {
data() {
const that = this;
return {
commodity: [
"boweisou.oss-cn-shenzhen.aliyuncs/yy/images/911a7002e11608fb581fffcde05d5257.jpg"，
"boweisou.oss-cn-shenzhen.aliyuncs/yy/images/2_1536049430.jpg",
"boweisou.oss-cn-shenzhen.aliyuncs/yy/images/911a7002e11608fb581fffcde05d5257.jpg"，
boweisou.oss-cn-shenzhen.aliyuncs/yy/images/2_1536049430.jpg,
]，这⾥就使⽤假数据了，
imgIndex: 1,
swiperOption: {
//是⼀个组件⾃有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第⼀时间获取到swiper对象，假如你需要刚加载遍notNextTick: true,
//循环
loop: true,
//设定初始化时slide的索引
initialSlide: 0,
//⾃动播放
autoplay: {
delay: 1500,
stopOnLastSlide: false,
disableOnInteraction: false
},
//滑动速度
speed: 800,
//滑动⽅向
direction: "horizontal",
//⼩⼿掌抓取滑动
grabCursor: true,
//滑动之后回调函数
on: {
slideChangeTransitionStart: function() {
that.imgIndex = alIndex + 1;  //获取轮播图⽚下标索引；这⾥有⼀个坑，之前⽹上到的是⽤activeIndex，但后来⽹上说的是这个realIndex，原来activeIndex是},
},
//分页器设置
pagination: {
el: ".swiper-pagination",
clickable: true,
type: "bullets"
}
}
}
},
created() {
this.swiperOption.autoplay = thismodity.length != 1 ? { //控制只有⼀张图⽚的时候不⾃动轮播
delay: 1500,
stopOnLastSlide: false,
disableOnInteraction: false
} : false;
},
methods: {
}
}
</script>
<style lang="less" rel="stylesheet/less">
html如何设置图片滚动modity{
background: #f5f5f5;
.container{
position: relative; .swiText { position: absolute; height: 0.5rem; width: 0.5rem; bottom: 0.2rem; right: 0.3rem;
font-size: 0.33rem; color: #fff;
z-index: 10;
}
.swiImgs { width: 100%;
.item{
height: 7.5rem;
.swiImg { width: 100%;
}
}
}
}
}
</style>
4.参数说明：
数类型
（swiper3）
默认值
（swiper3）
类型
（swiper4）
默认值
（swiper4）
说明
autoplay Number/Boolean0/false Object⾃动切换speed Number300Number300切换速度loop Boolean false Boolean false loop模式
loopAdditionalSlides Number0Number0loop模式下会在slides前后复制若⼲个slide,，前后复制的个数不会⼤于原总个数。
在loop模式下使⽤
loopedSlides Number1Number1slidesPerview:'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 Number1--free模式动量值（移动惯量）freeModeMomentumVelocityRatio Number1--动量反弹freeModeMomentumBounce Boolean true--Slides的滑动⽅向
freeModeMomentumBounceRatio Number1--值越⼤产⽣的边界反弹效果越明显，反弹距离越⼤。
freeModeSticky Boolean false--使得freeMode也能⾃动贴合。effect:swiper3/4 api相同
effect String slide--slide的切换效果。
fade/fadeEffect(4)Object--fade效果参数。
cube/cubeEffect Object--cube效果参数。
coverflow/coverflowEffect Object--coverflow效果参数。
flip/flipEffect Object--flip效果参数。
Zoom:
zoom Boolean false Object 焦距功能：双击slide会放⼤，并且在⼿机端可双指触摸缩放。
zoomMax Number3--最⼤缩放焦距（放⼤倍率）. zoomMin Number1--最⼩缩放焦距（缩⼩倍率）。
zoomToggle Boolean true--设置为false，不允许双击缩放，只允许⼿机端触摸缩放。
pagination:
pagination String-Object分页器容器的css选择器或HTML标签
paginationType String---bullets’ 圆点（默认）‘fraction’分式 ‘progress’ 进度
条‘custom’ ⾃定义
paginationClickable Boolean false--点击分页器的指⽰点分页器控制Swiper 切换
数类型
（swiper3）
默认值
（swiper3）
类型
（swiper4）
默认值
（swiper4）
说明

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。