动态内容的idangerous swiper问题

Question

我在一个容器上应用了idangerous swiper滚动条插件,其内容是用ajax动态加载的,我在ajax调用后初始化插件,问题是在我调整浏览器大小之前滚动不起作用.我已经使用静态内容对其进行了测试,它工作正常,无需调整窗口大小,但是一旦切换到动态内容,滚动将无法工作单元我调整浏览器大小.

这是我如何初始化插件

var mySwiper = new Swiper('.swiper-container', {
        scrollContainer: true,
        mousewheelControl: true,
        mode: 'vertical',            
        scrollbar: {
            container: '.swiper-scrollbar',
            hide: true,
            draggable: false
        }
    });  

这是html

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="searchList">
                //here's the dynamic content being loaded (a list of div elements)
            </div>
        </div>
    </div>
    <div class="swiper-scrollbar">
    </div>
</div>

swiper-container高度为100%

Answer 1

我找到了解决方案,我在首次初始化插件后添加了这个函数

function reinitSwiper(swiper) {
  setTimeout(function () {
   swiper.reInit();
  }, 500);
}

在另一个插件中提到了这个修复程序,当我尝试使用这个swiper插件时,它可以工作.它与插件有关,不知道DOM发生的变化.

Answer 2

我有一个没有JS的解决方案.

HTML

<div class="responsive-swiper-holder">

  <div class="responsive-swiper-shiv"></div>

  <div class="swiper-container">
      <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
      </div>
  </div><!-- .swiper-container -->

</div><!-- .responsive-swiper-holder -->

CSS

.responsive-swiper-holder {
  position: relative;
}

.responsive-swiper-shiv {
  padding-top: 31.25%;
}

.swiper-container {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
}

.swiper-wrapper, .swiper-slide {
  height: 100%;
}

因此,该方法也可以用于响应图像的方式制作任何div大小.用它的宽度锁定纵横比来缩放它的高度.

神奇的是,即使您填充所述元素的顶部或底部,浏览器也会将边距/填充%值视为元素宽度的百分比.

希望这可以帮助!

Answer 3

我对Swiper 3.x的修复(我相信以上涵盖了2.x)

function fixSwiperForIE(swiper) {
    setTimeout(function () {
        swiper.onResize();
    });
}

Answer 4

由于.reInit不再是功能，因此已针对Swiper文档中的更改进行了更新。

function reinitSwiper(swiper) {
  setTimeout(function () {
   swiper.update();
  }, 500);
}