vue-awesome-swiper兼容ie9

网上找了资料，都是采用babel-polyfill和classlist-polyfill插件，变成es5的语言从而兼容ie9，但是轮播效果没有了，因此，只能采用原生的swiper或者SuperSlide

采用swiper

目前只支持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);
 }

采用SuperSlide

目前支持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]);//调用轮播详情方法
    },

采用vue-awesome-swiper

目前支持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
     }
},