i have a little problem. I made a slider that plays photos with the coverflow effect in a loop. The problem is that when loading a new loop, the first time after all 8 slides, then after every 4, there is a slowdown. How to eliminate or remove it?
var mySwiper = new Swiper('.cakeSwiper', {
effect: 'coverflow',
loop:true,
// loopPreventsSlide: false,
// loopPreventsSliding: false,
// loopedSlides: 2,
autoplay: {
delay: 1,
disableOnInteraction: false,
// waitForTransition: 0 // set "wait for transition" time to 0,
},
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
slidesPerView: "auto", // show every slide at the start
// centeredSlides: true, // center the active slide
// initialSlide: 0, // start on the first slide
speed: 1000,
});
In scss i added webkit fx to linear transition but still it doesnt work
.cakeSwiper {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
.swiper-wrapper {
-webkit-transition-timing-function:linear!important;
-o-transition-timing-function:linear!important;
transition-timing-function:linear!important;
// transition-timing-function : linear;
.swiper-slide {
background-position: center;
background-size: cover;
width: 300px !important;
height: 300px;
.swiper-slide img {
display: block;
width: 100%;
height: auto;
}
}
}
}
Here is video to see how it 'works' https://www.veed.io/view/09bc20b2-8f10-4ec7-b8ee-04b2e443b995?panel=share
I used chat but he dont understand me. I looked for some answers on stack but i didnt found. Also swiper documentanion doesnt include any answer.