Javascript 具有动态内容的危险刷卡器问题

我在一个容器上应用idangerous swiper scrollbar插件，该容器的内容是用ajax动态加载的，我在ajax调用后初始化该插件，问题是在我调整浏览器大小之前，滚动无法工作。我已经用静态内容测试过了，它工作得很好，不需要调整窗口大小，但一旦我切换到动态内容，当我调整浏览器大小时，卷轴就不会工作了

下面是我如何初始化插件的

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

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

这是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>

//下面是正在加载的动态内容（div元素列表）

---

swiper容器高度为100%

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

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

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

---

这个补丁在另一个插件中提到，当我尝试使用这个swiper插件时，它起了作用。这与插件没有意识到DOM发生的变化有关。

对于响应性设计，我将以下方法称为resizeFix

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

---

我有一个无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 -->

<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>

因此，这种方法也适用于像图像那样响应任何div大小。使用锁定的宽高比缩放其高度

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

希望这有帮助

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

---

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

//快速创建要附加的html
var imgHTML=“”；
$.each（imgArray，函数（i，url）{
imgHTML+=''；
});
//启动开关
var mySwiper=new Swiper（“.Swiper container”{
//可选参数
循环：对，
自动高度：真
});
mySwiper.appendSlide（imgHTML）//附加图像
mysweer.update（）//更新swiper，使其重做绑定
});

---

我希望这能帮助一些需要帮助的人

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

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

泳衣3.4.2 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 -->

<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>

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
});

---

如果您的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
};

this.config={
zoom:错，
slidesPerView:slidesPerView，
首张幻灯片：12，
中心幻灯片：对，
间隔：8，
滚动条：false，
导航：错误，
分页：false，
是的，
鼠标轮：是的，
observer:true，//我遇到了同样的问题，我尝试了几种解决方案，我确实可以访问我使用的swipper实例“update（）”，但它在我的用例中不起作用，我没有尝试过“observer:true”配置，但在初始化呈现组件之前，我使用了另一种方法，我在父组件上添加了一个“ng container”标记，以验证组件在信息可用之前不会呈现，如下所示：

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



通过这种方式，我确保在我完全确定组件的数据可用后，我将初始化组件，然后我以这种方式呈现组件，您不会运行dinamic内容，因为转盘无法识别

虽然这种方法在我的用例中有效，因为我只加载了一次信息，但我建议如果您的用例是在某个时间间隔更改图像，使用“observer:true”选项，这可能听起来很明显是我的解决方案，但angular上有很多初学者不知道这种解决方案，希望它能帮助像我这样的人！
什么时候调用该方法？直接在swiper valiable初始化之后？对我不起作用（更新并重新初始化）。我在控制台中遇到此错误：
error TypeError:无法读取Swiper处未定义的属性“0”。updateSize
有什么想法吗？TypeError:this.toplider.resizeFix不是一个函数，稍作解释可能会有所帮助。问题是什么？您的代码是如何解决的？无法使用拇指。请帮助我。这是我的问题：