目前只支持2.6.7,3.XX版本及以上版本暂不支持,否则样式会出现问题;
缺点:但是在2.XX的版本中,只能单独分页轮播,无左右分页轮播,支持ie9及以上
swiper2.XX官网API文档
示例
//1、cdn引入
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/2.7.6/idangerous.swiper.min.js" integrity="sha512-60NOpaVYUGS2RQ1iDPaJrJq/9DUNBZ8+dSiot6nAnMoL4pft+rmteoGmUkBdA4slfLyCj7hhf0XaS7X5+SYdSg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/2.7.6/idangerous.swiper.min.css" integrity="sha512-8DrQbOuEoiMH8Pbs42A3SkEh7i4FmKfrjVzDte3WJwi75mfIU6UeYadkUEs1OBSJTIIz/lX5zv9Z1JQu7203ow==" crossorigin="anonymous" />
//2、vue页面
<div class="swiper-container slideBox" style="display: inline-block;">
<div class="swiper-wrapper" @click="toCSlide">
<div class="swiper-slide" v-for="item in slideNews" :key="item.id">
<a href="javascript:void(0);"> <!-- @click="toNewsInfo(item.id)" @click="toCSlide"-->
<img :src="context + item.imgtitle" width="100%" onerror="this.src='https://download.yxybb.com/project/MZ/resource/2020/11/23/imgmtbd.png'">
<span v-cloak>{{item.title | ellipsis(25)}}</span>
</a>
</div>
</div>
<div class="paginations"></div><!-- 分页器 -->
</div>
//3、获取动态数据后,必须采用nextTick处理轮播
this.slideNews = list.lbtnewlist;//轮播图
this.$nextTick(function () {//dom完成之后实现轮播效果
_this.swiper=new Swiper('.swiper-container', {
pagination:'.paginations',
autoplay:3000,//自动轮播时间
//autoplayDisableOnInteraction: false,//用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay
paginationClickable:true,//实现小圆点点击
loop:true,//循环轮播
simulateTouch : false,
});
//4、若采用loop循环,得通过swiper.activeLoopIndex获取图片的下标,从而查询详情;否则采用原生的click事件,部分图片点击无效
toCSlide(){//查询相关新闻
if(_this.swiper)this.common.getNewsInfo(this.slideNews[_this.swiper.activeLoopIndex].id,1);
}
目前支持ie8以及以上,有分页轮播
缺点:灵活性没有swiper专业
官网地址
示例
//1、html
<div class="picScroll-left">
<div class="hd">
<a class="next"></a>
<ul></ul>
<a class="prev"></a>
<span class="pageState"></span>
</div>
<div class="bd">
<ul class="picList" @click="getLbtSpecial">
<li v-for="(item,index) in ztzlNewList" :key="index" style="width:253px !important;" :data-index="index">
<div class="pic"><a href="javascript:void(0);"><img :src="context + item.imgpath" @error="imgError" style="height:126px;width:100%" /></a></div>
</li>
</ul>
</div>
</div>
//2、引入js
import '@/assets/js/jquery1.42.min.js';
import '@/assets/js/jquery.SuperSlide.2.1.3.js';
//3、动态引入轮播数据
this.lbtNewList=newslist.lbtnewlist;//轮播图
if(this.lbtNewList.length>0) this.$nextTick(function () {
$("#slideBox").slide({
titCell: ".hd ul",
mainCell: ".bd ul",
autoPage: true,
effect: "leftLoop",
autoPlay: true,
delayTime: 500, //切换速度
interTime: 3000, //每次切换间隔时间
pnLoop: true //前后循环按钮
});
});
}
//4.若是超过图片并列并采用loop轮播时,采用事件委托(原因:采用原生的click事件,部分图片点击无效)
getLbtSpecial(e){//专题专栏轮播图-事件委托
let el=e.target;
let index=el.parentNode.parentNode.parentNode.getAttribute("data-index");
if(el.localName!="img")index=el.getAttribute("data-index");
this.getSpecial(this.ztzlNewList[index]);//调用轮播详情方法
},
目前支持ie10及以上
npm包地址
示例
//1、npm下载插件,我这边一般都是3.1.3版本
npm install vue-awesome-swiper@3.1.3
//2、html代码
<swiper class="slideBox swiper-no-swiping" :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="item in slideNews" :key="item.id" >
<a href="javascript:void(0);" @click="toNewsInfo(item.id)">
<img v-lazy="context + item.imgtitle" width="100%" >
<span>{{item.title | ellipsis(25)}}</span>
</a>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
//3、引入swiper:轮播图在项目中引用的比较多,最好是全局引用,若比较少,则按需引入;避免影响性能
import { swiper,swiperSlide} from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
//4、data中引入
swiperOption: {
effect: 'left', //从左开始
autoplay:{
disableOnInteraction : false,
},
pagination: {
el: '.swiper-pagination',//分页器
clickable :true
}
},