Tukukkk

I'm experiencing an issue with swiper.js on mobile that causes the slider to randomly jump back to the first slide when I scroll up and down to read the text.

I have placed a demo of the error online here and I have setup a codepen of the issue here. The codepen version and online version are exactly the same code however I found it difficult to replicate the error on codepen I believe due to the way codepen renders on mobile.

Here is how to replicate the error:

1. View the site on mobile


2. Swipe to the second or third slide


3. Scroll up and down on the slide (in order to read the text)


4. The slider then reverts back to first slide automatically.

Here is a copy of the 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 -->

Here is a copy of the 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%;

    }

Here is a copy of the 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',

          }

        }

      },  

    });

  });    



});

Any help would be appreciated.