vue.js有轮播图插件吗？

vue-awesome-swiper插件

vue-awesome-swiper是基于 Swiper4、适用于 Vue 的轮播组件，支持服务端渲染和单页应用。

vue-awesome-swiper是基于swiper的，安装不同版本的vue-awesome-swiper对应不同的swiper，所以swiper里面的属性多数能应用到vue-awesome-swiper中，也可以根据swiper文档来设置vue-awesome-swiper属性；

swiper官方文档：https://www.swiper.com.cn/api/index2.html

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>
<divclass="commodity">
<divclass="container">
<swiperclass='swiImgs':options="swiperOption"v-if="commodity.length!=0">
<swiper-slidev-for="(item,index)incommodity"data-index="index":key="index"class="item">
<imgclass='swiImg':src='item'/>
</swiper-slide>
<divclass="swiper-scrollbar"></div>//滚动条
<divclass="swiper-button-next"></div>//下一页
<divclass="swiper-button-prev"></div>//上一页
 <divclass="swiper-pagination"v-for="(item,index)indetailimages":key="index"slot="pagination">
 </div> 
</swiper>
<spanclass='swiText'v-if='commodity'>{{imgIndex}}/{{commodity.length}}</span>
</div>
</div>
</template>
<script>
exportdefault{
data(){
constthat=this;
return{
commodity:[
"https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/911a7002e11608fb581fffcde05d5257.jpg-600"，
"https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/2_1536049430.jpg-600",
"https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/911a7002e11608fb581fffcde05d5257.jpg-600"，
https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/2_1536049430.jpg-600,
],//这里就使用假数据了，

imgIndex:1,

swiperOption:{

//是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，
//也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，
//那么这个属性一定要是true

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=this.realIndex+1; //获取轮播图片下标索引；这里有一个坑，之前网上找到的是用activeIndex，
//但后来网上说的是这个realIndex，原来activeIndex是swiper2.0的；而realIndex是swiper3.0的，
//（使用realIndex才实现了下标索引）

},

},

//分页器设置 

pagination:{

el:".swiper-pagination",

clickable:true,

type:"bullets"

}

}

}

},

created(){

this.swiperOption.autoplay=this.commodity.length!=1?{//控制只有一张图片的时候不自动轮播

delay:1500,

stopOnLastSlide:false,

disableOnInteraction:false

}:false;

},

methods:{

}

}

</script>

<stylelang="less"rel="stylesheet/less">

.commodity{

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、参数说明：

更多web前端开发知识，请查阅 HTML中文网 ！！

以上就是vue.js有轮播图插件吗？的详细内容，更多请关注0133技术站其它相关文章！