I use swiper in my angular homepage and during its scrolling with finger (on mobile) the page jump or bounce a little. It happens when I put away the finger after scrolling. I checked that it happen only when swiper is enabled and the same effect occurs in an empty angular application with no special styles. Also it`s hard to debug because I noticed no events in swiper during page scrolling. The .ts code is as follow:
import SwiperCore, { Navigation, Pagination, Autoplay } from 'swiper/core';
SwiperCore.use([Navigation, Pagination, Autoplay]);
.html
<swiper [slidesPerView]="1" [spaceBetween]="30" [loop]="true" [navigation]="true" [pagination]="{clickable: true}"
[autoHeight]="true" [autoplay]="{
delay: 4500,
disableOnInteraction: true
}" class="mySwiper ">
<ng-template swiperSlide>
...
</ng-template>
<ng-template swiperSlide>
...
</ng-template>
<ng-template swiperSlide>
...
</ng-template>
</swiper>
.scss:
@import "~swiper/swiper";
@import "~swiper/components/navigation/navigation";
@import "~swiper/components/pagination/pagination";
.mySwiper{
padding-bottom: 2rem;
}
.swiper-container {
width: 100%;
z-index:0;
}
.swiper-slide {
text-align: center;
font-size: 18px;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
The problem occurs only on mobile (I checked only on smartphones with android). Browsers I checked: chrome and opera. How to avoid page jumping while scrolling using swiperjs? Codesanbox demo