Question

swiperjs中是否有办法知道幻灯片进度的真实事件？

我将幻灯片速度设置为6秒（非常慢）。

我尝试听进度事件。但是当我单击箭头时，它只会发射一次。当我使用触摸滑动时，它可以正确触发，但是当我松开触摸时，幻灯片仍在移动，但是进度不会触发。

因此，进度栏无法正常工作。

我正在寻找告诉我“幻灯片正在移动”的事件。我尝试了文档中的所有事件。但它们都不起作用。也许是另一种技术？

var swiperOptions = {
  speed: 5000,
  grabCursor: true,
  watchSlidesProgress: true,
  mousewheelControl: true,
  keyboardControl: true,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
  on: {
    progress: function(data)  {
      console.log('event progress', data);
    }
  }
};

var swiper = new Swiper(".swiper-container", swiperOptions);

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  background: #404449;
  margin: 0;
  padding: 0;
}

.swiper-container {
  height: calc(100vh - 120px);
  margin: 60px;
}

.swiper-slide {
  overflow: hidden;
}

.slide-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-size: cover;
  background-position: center;
}

a {
  color: white;
}

.wrap-footer { position:absolute;bottom:0;height:100px;background:#000;width:100%;overflow:hidden; }
.footer { height:100px;/*transform:translateY(-100px);*/} 
.red { background:red; }
.blue { background: blue;}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.css" integrity="sha256-eN7gD6kRzzeXS87cycVGlO3smXA9o+yeN0BDkTVaOc0=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.js" integrity="sha256-2AzmZuC/JWSxd9zvzxqNIBQIoB/uSRsSYtXJBhAkfjY=" crossorigin="anonymous"></script>

<div class="swiper-container">
  <div class="swiper-wrapper">

    <div class="swiper-slide">
      <div class="slide-inner" style="background-image:url(https://pp.userapi.com/c836139/v836139003/63ce1/QThPx7qPzvU.jpg)"></div>
    </div>
    <div class="swiper-slide">
      <div class="slide-inner" style="background-image:url(https://pp.userapi.com/c412624/v412624691/4136/_da_uAA6ha8.jpg)"></div>
    </div>
    <div class="swiper-slide">
      <div class="slide-inner" style="background-image:url(https://pp.userapi.com/c637331/v637331691/48f5f/spHnV42iYVw.jpg)"></div>
    </div>
    <div class="swiper-slide">
      <div class="slide-inner" style="background-image:url(https://pp.userapi.com/c837139/v837139407/67f52/fFqjq4U2mEk.jpg)"></div>
    </div>
  </div>
  <div class="swiper-button-next swiper-button-white"></div>
  <div class="swiper-button-prev swiper-button-white"></div>
</div>

Answer 1

我认为，你可以这样做。

onProgress: (swiper, progress) => {...}

为什么滑动进度事件不能反映幻灯片的运动？

1 个答案: