, when loading for the first time, if manual carousel is triggered, it will be stuck. Automatic carousel is easy to use, but once manual carousel is also stuck, it cannot be automatically rotated.
but exit the page and enter again, and both manual and automatic carousel will be useful.
<main v-if="hasdata">
<div class="sliderbox">
<swiper :options="swiperOption" v-if="productRecommends.length> 0">
<swiper-slide v-for="(slide, index) in productRecommends" :key="index" >
<img :src= slide.logo alt="" class="img">
<img src="@/assets/hotproduct/top1.png" alt="" class="top" v-if="index == 0">
<img src="@/assets/hotproduct/top2.png" alt="" class="top" v-if="index == 1">
<img src="@/assets/hotproduct/top3.png" alt="" class="top" v-if="index == 2">
<p class="p1">{{slide.name}}
<p class="p2">{{slide.subtitle}}
<p class="p3">
<span>{{slide.prem}}</span>
<!-- <span></span> -->
<p class="btn" @click="goDetail(slide.name, slide.url)">
</swiper-slide>
</swiper>
</div>
</main>
swiper coverflowonprogress
swiperOption: {
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
// effect: "coverflow",
// centeredSlides: true,
// slidesPerView: "auto",
// coverflowEffect: {
// rotate: 0,
// stretch: -30, // slide
// depth: 400, // slide
// modifier: 0.5, //
// slideShadows: false //
// },
watchSlidesProgress: true,
slidesPerView: "auto",
centeredSlides: true,
observer:true,
observeParents:true,
on: {
progress: function(progress) {
for (let i = 0; i < this.slides.length; iPP) {
var slide = this.slides.eq(i);
var 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 * 14.6 + "rem";
let scale = 1 - Math.abs(slideProgress) / 5;
let zIndex = 20 - 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);
}
}
},
setTransition: function(transition) {
for (var i = 0; i < this.slides.length; iPP) {
var slide = this.slides.eq(i)
slide.transition(transition);
}
}
},