Ошибка мобильного Swiper.js: случайное возвращение к первому слайду - PullRequest
Новая
       9

Ошибка мобильного Swiper.js: случайное возвращение к первому слайду

0 голосов
/ 21 ноября 2018

У меня проблема с swiper.js на мобильном устройстве, из-за которой ползунок случайным образом возвращается к первому слайду при прокрутке вверх и вниз для чтения текста.

Я разместил демо-версию ошибки онлайн здесь , и здесь я установил кодовый номер проблемы .Версия codepen и онлайн-версия - это в точности один и тот же код, однако мне было трудно воспроизвести ошибку на codepen, я думаю, из-за того, как codepen рендерит на мобильном устройстве.

Вот как можно повторить ошибку:

  1. Просмотр сайта на мобильном телефоне
  2. Проведите до второго или третьего слайда
  3. Прокрутите слайд вверх и вниз (чтобы прочитать текст)
  4. Ползунок затем возвращается к первому слайду автоматически.

Вот копия 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',
          }
        }
      },  
    });
  });    

});

Любая помощь будет оценена.

...