My swiper is not working properly upon resize either it show
My swiper version : "swiper": "^11.1.0",
- Black blank screen
- Merges next and previous images
Here is problem
Here is what my current code looks like
import { Zoom, Navigation ,Virtual } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/zoom';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
export default{
data(){
return {
slides:[],
allAssetsList:[],
}
},
}.asset-slider-wrapper{
height: 100%;
}
.swiper-container,
.swiper-wrapper,
.swiper-slide {
width: 100%;
height: 100%;
}
.swiper-slide{
height: calc(100vh - 60px - env(safe-area-inset-top)) !important;
}
:deep(.swiper-slide){
height: calc(100vh - 60px - env(safe-area-inset-top)) !important;
background: #000;
} <div class="asset-slider-wrapper">
<div class="swiper-container" >
<swiper
:zoom="true"
ref="swiperModuleRef"
@slideChange="handleSlideChange"
@beforeSlideChangeStart="$emit('beforeSlideChange')"
@touchStart="$emit('touchStart')"
@touchEnd="$emit('touchEnd')"
@beforeResize="$emit('beforeResize')"
@zoomChange="handleZoomChange"
:resizeObserver="true"
:style="{'--swiper-navigation-color': '#fff','--swiper-pagination-color': '#fff'}"
:navigation="true" :virtual="{
addSlidesBefore:2 , addSlidesAfter:2
}">
<swiper-slide
v-for="(asset,index) in allAssetsList"
:key="index"
:virtualIndex="index"
style="height:100vh;"
>
<div class="swiper-zoom-container" style="position:relative;" :assetId="asset._id">
<img v-if="isImage(asset)" :src="getThumbnailPath(asset,true)" :assetId="asset._id"/>
</swiper-slide>
</swiper>
</div>
</div>Note : I’m using virtual slider for better experience on mobile as it was crashing with 600 + images so i’m using virtual slider.
Please help me i’m struggling with this problem for so many days now.