Swiper 3 onSlideChangeStart

HTML

<link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">
<script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.js"></script>
<div class="swiper-container swiper-container-horizontal">
  <ul class="swiper-wrapper">
    <li class="swiper-slide">
      <img class="swiper-lazy" src="http://olhzdi73f.bkt.clouddn.com/%E5%8F%8C%E7%9C%BC%E7%9A%AE%E9%A6%96%E9%A1%B5banner.jpg">
    </li>
    <li class="swiper-slide">
      <img class="swiper-lazy" src="http://olhzdi73f.bkt.clouddn.com/%E7%94%A8%E6%88%B7%E7%89%88APP%E9%A6%96%E9%A1%B5%E8%BD%AE%E6%92%AD_20170309.jpg">
    </li>
    <li class="swiper-slide">
      <img class="swiper-lazy" src="http://olhzdi73f.bkt.clouddn.com/left-side-icon.png">
    </li>
  </ul>
  <div class="swiper-pagination" ref="pagination"></div>
</div>

SCSS

* {
  margin: 0;
  padding: 0;
}
.swiper-container{
  overflow: hidden;
}
.swiper-slide{
  width: 350px;
  min-height: 40px;
  border-radius: 8px;
  overflow: hidden;
  opacity: .3;
  transition: opacity .3s ease-out;
  img{
    display: block;
    width: 100%;
    height: 100%;
  }
  &.effect-active{
    opacity: 1;
  }
}

JavaScript

new Swiper('.swiper-container', {
  // autoplay: 5000,
  autoplayDisableOnInteraction: false,  // 用户操作后停止自动播放
  loop: true,
  slidesPerView: 'auto',
  centeredSlides: true,
  spaceBetween: 12,
  pagination: '.swiper-pagination',
  paginationType: 'bullets',
  lazyLoading: true,  // 图片懒加载
  lazyLoadingInPrevNext: true,  // 允许将延迟加载应用到最接近的slide的图片
  lazyLoadingOnTransitionStart: true,  // 过渡一开始就加载
  onSlideChangeStart: function (swiper) {
  console.log('teste');
    var currentSlideEl = swiper.slides[swiper.activeIndex]
    var slideEls = swiper.container[0].querySelectorAll('.swiper-slide')
    Array.prototype.forEach.call(slideEls, slideEl => {
      if (slideEl === currentSlideEl) {
        slideEl.classList.add('effect-active')
      } else {
        slideEl.classList.remove('effect-active')
      }
    })
  }
})