19

我在一个容器上应用了危险的 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%

4

9 回答 9

15

我找到了解决方案，我添加了这个函数，我在第一次初始化插件后调用

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

这个修复在另一个插件中提到过，当我用这个 swiper 插件尝试它时，它起作用了。这与插件不知道 DOM 发生的变化有关。

于 2013-07-08T17:14:49.327 回答
6

我对 Swiper 3.x 的修复（我相信上面涵盖了 2.x）

function fixSwiperForIE(swiper) {
    setTimeout(function () {
        swiper.onResize();
    });
}
于 2015-04-06T19:52:22.930 回答
6

Updated for Change in Swiper documentation since .reInit is no longer a function.

function reinitSwiper(swiper) {
  setTimeout(function () {
   swiper.update();
  }, 500);
}
于 2017-02-26T13:53:41.513 回答
5

我有一个无 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 大小。使用锁定的宽高比缩放它的高度。

神奇的是浏览器将边距/填充百分比值视为元素宽度的百分比，即使您正在填充所述元素的顶部或底部。

希望这可以帮助！

于 2015-03-12T15:13:57.293 回答
2

我只是想补充一点，我也很难让 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
  });

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

于 2016-09-05T15:50:59.803 回答
0

刷卡器 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
});
于 2017-03-27T19:09:12.750 回答
0

如果您的 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。在这种情况下，如果您更改其样式（如隐藏/显示）或修改其子元素（如添加/删除幻灯片），每次 Swiper 都会更新（重新初始化） https://swiperjs.com/api/

于 2020-08-02T10:08:17.543 回答
0

我遇到了同样的问题，我尝试了几种解决方案，我确实可以访问我使用“update（）”的 swipper 实例，但它不适用于我的用例我没有尝试过“observer：true”配置，但我在初始化演示组件之前使用了不同的方法，我在父组件上添加了一个“ng-container”标签，以验证组件在信息可用之前不会渲染，如下所示：

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

通过这种方式，我确保一旦我完全确定数据可用，我将初始化组件，然后我以这种方式渲染组件，您不会遇到动态内容不被轮播识别的问题,.

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

于 2021-01-12T17:47:16.403 回答
-1

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

    function reinitSwiper(swiper) {
       swiper.resizeFix(true)
    }
于 2014-06-02T09:14:27.260 回答