Question

我在内容动态加载ajax的容器上应用了idangerous swiper滚动条插件，我在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

更新了Swiper文档中的更改，因为.reInit不再是一个函数。

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

Answer 5

我只想补充一点，我也无法让Swiper通过ajax处理动态加载的内容。这显然是因为当Swiper被启动时内容尚未加载。我通过使用swiper自己的附加功能而不是我自己的功能来解决这个问题。这是在3.3.1版本上，它为我修复了它，而无需使用setTimeout()或任何东西！

//quick and dirty creation of html to append
var imgHTML = "";
  $.each(imgArray, function (i, url) {
    imgHTML += '<div class="swiper-slide"><img src="' + url + '" alt=""/></div>';
  });

  //initiate swiper
  var mySwiper = new Swiper('.swiper-container', {
    // Optional parameters
    loop: true,
    autoHeight: true
  });

  mySwiper.appendSlide(imgHTML); //append the images
  mySwiper.update(); //update swiper so it redoes the bindings
  });

我希望这可以帮助一些有需要的人！

Answer 6

swiper 3.4.2

<强> HTML

<div class="swiper-container">
    <div class="swiper-wrapper" style="height: auto">
        <div class="swiper-slide"><img src="" width="100%"></div>
        <div class="swiper-slide"><img src="" width="100%"></div>
        <div class="swiper-slide"><img src="" width="100%"></div>
        <div class="swiper-slide"><img src="" width="100%"></div>
        <div class="swiper-slide"><img src="" width="100%"></div>
    </div>
    <div class="swiper-pagination"></div>
</div>

<强> CSS

.swiper-container {
    width: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    text-align: center;
    line-height: 10px;
    font-size: 12px;
    color:#000;
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}
.swiper-pagination-bullet-active {
    color:#fff;
    background: #000000;
}

<强>的javascript

var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    slidesPerView: 1,
    spaceBetween: 0,
    centeredSlides: true,
    autoplay: 2500,
    autoplayDisableOnInteraction: false,
    loop: true,
    autoHeight: true
});

Answer 7

如果您的swiperjs幻灯片中的图像动态变化，请在配置对象中使用observer: true。

this.config = {
  zoom: false,
  slidesPerView: slidesPerView,
  initialSlide: 12,
  centeredSlides: true,
  spaceBetween: 8,
  scrollbar: false,
  navigation: false,
  pagination: false,
  watchOverflow: true,
  mousewheel: true,
  observer: true, // <--------------------------add this
};

根据文档： observer: true -设置为true以启用Swiper及其元素上的Mutation Observer。在这种情况下，如果更改样式（如隐藏/显示）或修改其子元素（如添加/删除幻灯片），则每次都会刷新（重新初始化） https://swiperjs.com/api/

Answer 8

我遇到了同样的问题，我尝试了几种解决方案，我确实可以访问我使用的 swipper 实例，我使用了“update()”，但它在我的用例中不起作用，我还没有尝试过“观察者” : true”配置，但在初始化演示组件之前，我结束了使用不同的方法，我在父组件上添加了一个“ng-container”标签，以验证该组件确实不会渲染，直到信息可用，如下所示：< /p>

<ng-container *ngIf="data?.items" >
    <carousel-component [items]="data?.items"></table-component>
</ng-container>

通过这种方式，我确保一旦我完全确定它的数据可用，我就会初始化组件，然后我以这种方式渲染组件，您不会因为动态内容的问题而无法被识别通过旋转木马。

尽管这种方法适用于我的用例，因为我只加载一次信息，但我建议如果您的情况是在某个时间间隔内更改图像以使用“观察者：真实”选项，这听起来可能很明显我的解决方案，但是有很多 angular 初学者不知道这种解决方案，希望它可以帮助像我这样的人！

Answer 9

对于响应式设计，我调用以下方法resizeFix

    function reinitSwiper(swiper) {
       swiper.resizeFix(true)
    }

动态内容的idangerous swiper问题

9 个答案:

swiper 3.4.2