解决:
添加新的属性:loopAdditionalSlides
默认为0 ==> 前后复制一个;loopAdditionalSlides为1 ==> 前后复制两个
代码如下:
<Swiper
@slide-change="onSwiperChange"
:loop-additional-slides="1"
:initial-slide="0"
:autoplay="true"
:speed="300"
:effect="'coverflow'"
:slides-per-view="1.5"
:centered-slides="true"
:loop="true"
:coverflow-effect="{
rotate: 0,
stretch: 500,
depth: 800,
modifier: 0.7,
slideShadows: false,
}"
:pagination="{
clickable: true,
}"
:navigation="true"
:preload-images="true"
>
<SwiperSlide v-for="(item, index) in List" :key="item.id">
<button>{{ realIndex }} {{ index }} {{ index === realIndex }}</button>
<div class="item">
<div class="img">
<!-- <img src="../public/bg.jpg" :class="{'img-opacity':index===realIndex}"/> -->
<img
src="../public/bg.jpg"
:style="index === realIndex && 'opacity: 1;'"
/>
</div>
</div>
</SwiperSlide>
</Swiper>
最终效果: