slide的顺序为什么回颠倒？ - Swiper中文论坛

<template>
<div class="certify">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide class="swiper-slide">
<img src="images/certify01.png">
</swiper-slide>
<swiper-slide class="swiper-slide">
<img src="images/certify01.png">
</swiper-slide>
<swiper-slide class="swiper-slide">
<img src="images/certify01.png">
</swiper-slide>
<swiper-slide class="swiper-slide">
<img src="images/certify01.png">
</swiper-slide>
<swiper-slide class="swiper-slide">
<img src="images/certify01.png">
<div class="all_text">全部></div>
</swiper-slide>
</swiper>
</div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
watchSlidesProgress: true,
slidesPerView: "auto",
centeredSlides: true,
loop: false,
loopedSlides: 5,
autoplay: false,
}
};
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
mounted() {
this.swiper.on("progress", function() {
for (let i = 0; i < this.slides.length; i++) {
let slide = this.slides.eq(i);
let slideProgress = this.slides[i].progress;
let modify = 1;
if (Math.abs(slideProgress) > 1) {
modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
}
let translate = slideProgress * modify * 260 + "px";
let scale = 1 - Math.abs(slideProgress) / 5;
let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
slide.transform("translateX(" + translate + ") scale(" + scale + ")");
slide.css("zIndex", zIndex);
slide.css("opacity", 1);
if (Math.abs(slideProgress) > 3) {
slide.css("opacity", 0);
}
}
});
this.swiper.on("setTransition", function(transition) {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i);
slide.transition(transition);
}
});
}
};
</script>
<style>
.certify {
position: relative;
width: 375px;
margin: 0 auto;
}
.certify .swiper-slide {
position: relative;
width: 30vw;
height: 150px;
background: #fff;
box-shadow: 0 2px 4px #ddd;
}
.certify .swiper-slide img {
display: block;
width: 100%;
height: 100%;
}
.all_text {
position: relative;
top: -50%;
}
</style>

复制代码