swiper层叠轮播使用loop循环轮播在vue失效如何解决？

Question

在vue项目中，使用层叠轮播coverflowEffect，轮播滚动到最后一张图片就不能再滚动，且第一张和最后一张有留白，
设置loop并没有触发效果

代码如下

Html

<swiper :options="swiperOption" ref="mySwiper">
    <swiper-slide v-for="(item,index) in bannerList" :key="index">
        <div class="banner-img" 
        :style="{backgroundImage: 'url(' + item.img + '?x-oss-process=image/resize,w_400)', 
         backgroundSize:'cover',backgroundPosition:'50% 50%'}"  @click="selectBanner(index)">            
        </div>   
     </swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
</swiper>

Js

 swiperOption: {
    autoplay:true,
    pagination: {
      el: '.swiper-pagination'       
      },
    effect: 'coverflow', 
    loop: true,
    stretch:1,
    depth:1000,
    loopedSlides:3,
    coverflowEffect: {
      rotate: 0,
      stretch: 10,
      depth: 160,
      modifier: 2,
      slideShadows: false
        },
    }

现在如何才能在第一张时候可以向左滑动可以到最后一张，最后一张向右滑动可以到一张，并且第一张和最后一张不留白？

Answer 1

在swiper加上 v-if="bannerList.length"

<swiper :options="swiperOption" ref="mySwiper" v-if="bannerList.length">  
   不变                
</swiper>

即可