我在移动设备上遇到swiper.js的问题，当我上下滚动以阅读文字时，该滑块会随机跳回到第一张幻灯片。
我已经放置了错误online here的演示，并且已经设置了codepen of the issue here。 Codepen版本和在线版本是完全相同的代码，但是我发现由于Codepen在移动设备上呈现的方式，我很难在Codepen上复制错误。
以下是复制错误的方法：
这是HTML的副本：
<!-- CAROUSEL -->
<section class="carousel bg-blue section-container">
<div class="container-fluid swiper-fluid-container">
<!-- Slider -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="container">
<div class="row align-items-stretch no-gutters">
<div class="col-lg-6">
<div class="swiper-slider--image">
<img src="image-url" alt="" />
</div>
</div>
<div class="col-lg-6 swiper-slide-box">
<h4>Slide1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae pretium orci, nec lobortis eros. Sed at leo id odio ultrices iaculis. Ut at nulla dapibus, lacinia felis at, pharetra magna. Ut ac ipsum sapien. Proin et odio nec velit tempor ullamcorper. Praesent eget enim eu nisl laoreet imperdiet. Quisque quis ullamcorper sem. Curabitur vitae quam laoreet, sodales nunc euismod, pharetra elit. Sed dapibus odio augue, ut mattis orci vulputate dictum. Donec mauris odio, laoreet id ullamcorper sed, cursus et sem. Duis interdum varius lacus, vel faucibus purus pretium vel.</p>
<a href="#" target="" class="button">Learn more</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="container">
<div class="row align-items-stretch no-gutters">
<div class="col-lg-6">
<div class="swiper-slider--image">
<img src="image-url" alt="" />
</div>
</div>
<div class="col-lg-6 swiper-slide-box">
<h4>Slide2</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae pretium orci, nec lobortis eros. Sed at leo id odio ultrices iaculis. Ut at nulla dapibus, lacinia felis at, pharetra magna. Ut ac ipsum sapien. Proin et odio nec velit tempor ullamcorper. Praesent eget enim eu nisl laoreet imperdiet. Quisque quis ullamcorper sem. Curabitur vitae quam laoreet, sodales nunc euismod, pharetra elit. Sed dapibus odio augue, ut mattis orci vulputate dictum. Donec mauris odio, laoreet id ullamcorper sed, cursus et sem. Duis interdum varius lacus, vel faucibus purus pretium vel.</p>
<a href="#" target="" class="button">Learn more</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="container">
<div class="row align-items-stretch no-gutters">
<div class="col-lg-6">
<div class="swiper-slider--image">
<img src="image-url" alt="sun city farms" />
</div>
</div>
<div class="col-lg-6 swiper-slide-box">
<h4>Slide3</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae pretium orci, nec lobortis eros. Sed at leo id odio ultrices iaculis. Ut at nulla dapibus, lacinia felis at, pharetra magna. Ut ac ipsum sapien. Proin et odio nec velit tempor ullamcorper. Praesent eget enim eu nisl laoreet imperdiet. Quisque quis ullamcorper sem. Curabitur vitae quam laoreet, sodales nunc euismod, pharetra elit. Sed dapibus odio augue, ut mattis orci vulputate dictum. Donec mauris odio, laoreet id ullamcorper sed, cursus et sem. Duis interdum varius lacus, vel faucibus purus pretium vel.</p>
<a href="#" target="" class="button">Learn more</a>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<!-- End Slider -->
</div>
</section>
<!-- END CAROUSEL -->
这是CSS的副本：
/*CAROUSEL*/
.carousel__title {
text-align: center;
margin-bottom: 50px;
color: #4f5d6d;
}
.carousel__title p {
font-size: 17px;
}
.carousel__title h2 {
margin-bottom: 30px;
}
.swiper-container {
position: relative;
}
.swiper-fluid-container {
padding: 0;
}
.swiper-container .swiper-pagination {
position: relative;
z-index: 1;
bottom: 0;
margin-top: 50px;
}
.swiper-container .swiper-pagination-bullet {
width: 40px;
height: 7px;
border-radius: 0;
}
.swiper-container .swiper-pagination-bullet-active {
background: #3ca939;
}
.swiper-slide .swiper-slide-box {
background-color: #fff;
box-sizing: border-box;
padding: 45px;
color: #465260;
font-size: 15px;
line-height: 170%;
align-self: stretch;
min-height: 350px;
}
.swiper-slide .swiper-slide-box:after {
content: "";
width: 100%;
height: 8px;
display: block;
position: absolute;
bottom: 0;
left: 0;
background: #005991; /* Old browsers */
background: -moz-linear-gradient(left, #005991 45%, #097fc9 45%, #005991 45%, #097fc9 45%, #097fc9 45%, #097fc9 72%, #097fc9 72%, #3ca939 72%, #3ca939 72%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #005991 45%,#097fc9 45%,#005991 45%,#097fc9 45%,#097fc9 45%,#097fc9 72%,#097fc9 72%,#3ca939 72%,#3ca939 72%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #005991 45%,#097fc9 45%,#005991 45%,#097fc9 45%,#097fc9 45%,#097fc9 72%,#097fc9 72%,#3ca939 72%,#3ca939 72%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005991', endColorstr='#3ca939',GradientType=1 ); /* IE6-9 */
}
.swiper-slide-box h4 {
border-bottom: 1px solid #dddddd;
padding-bottom: 15px;
margin-bottom: 30px;
}
.swiper-slide-box .button {
margin-top: 10px;
}
.swiper-slide {
opacity: 0.5;
overflow: hidden;
position: relative;
}
.swiper-slide-active {
opacity: 1;
}
.swiper-slider--image {
overflow: hidden;
max-height: 100%;
position: absolute;
right: 0;
width: 100%;
left: 0;
top: 0;
bottom: 0;
}
.swiper-slider--image img {
object-fit: cover;
height: 100%;
width: 100%;
}
这是JS的副本：
jQuery(function ($) {
//SWIPER SLIDER
$(window).on("load resize", function(){
var mySwiper = new Swiper ('.swiper-container', {
spaceBetween: 0,
centeredSlides: true,
slideToClickedSlide:true,
slidesPerView: 1.5,
pagination: {
el: '.swiper-pagination',
clickable: true
},
breakpoints: {
768: {
slidesPerView: 1,
centeredSlides: false,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
}
},
});
});
});
任何帮助将不胜感激。