Swiper.js mobile bug: Randomly reverting back to first slide












0















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.










share|improve this question



























    0















    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.










    share|improve this question

























      0












      0








      0








      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.










      share|improve this question














      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.







      jquery html css mobile swiper






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 21 '18 at 3:14









      PedzPedz

      140117




      140117
























          0






          active

          oldest

          votes











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53404778%2fswiper-js-mobile-bug-randomly-reverting-back-to-first-slide%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          0






          active

          oldest

          votes








          0






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes
















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53404778%2fswiper-js-mobile-bug-randomly-reverting-back-to-first-slide%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          這個網誌中的熱門文章

          Xamarin.form Move up view when keyboard appear

          Post-Redirect-Get with Spring WebFlux and Thymeleaf

          Anylogic : not able to use stopDelay()