一页中的多个Jssor在chrome中失败

Question

我为我的投资组合页面做了多个 jssor 画廊

http://www.jmkintela.com/

所有滑块都在工作，除了最后一个，带有情节提要的那个，它有 600 张图片，我发现在谷歌浏览器下，只有当它最大化时，它才会开始缩减图片而不显示它们，基本上它打破了，但奇怪的是它只有那个画廊，当我调整窗口大小时，它工作得很好，当我减少少于 100 和 Internet Explorer 上的图像数量时。

我认为也许一些窗口调整大小命令会在最大化时更新大小（例如..$Jssor$.$AddEvent(window, "load", ScaleSlider);c）可以解决这个问题，但我对 jssor 和 js 的了解并不那么深。 我尝试了几个小时来解决这个问题，但它超出了我的能力范围，我在这里问。 这是我用于画廊的代码

jssor_1_slider_init = function() {

        var jssor_1_SlideoTransitions = [
          [{b:900,d:2000,x:-379,e:{x:7}}],
          [{b:900,d:2000,x:-379,e:{x:7}}],
          [{b:-1,d:1,o:-1,sX:2,sY:2},{b:0,d:900,x:-171,y:-341,o:1,sX:-2,sY:-2,e:{x:3,y:3,sX:3,sY:3}},{b:900,d:1600,x:-283,o:-1,e:{x:16}}]
        ];

        var jssor_1_options = {
          $AutoPlay: 1,
          $SlideDuration: 800,
          $SlideEasing: $Jease$.$OutQuint,
          $CaptionSliderOptions: {
            $Class: $JssorCaptionSlideo$,
            $Transitions: jssor_1_SlideoTransitions
         },
          $ArrowNavigatorOptions: {
            $Class: $JssorArrowNavigator$
         },
          $BulletNavigatorOptions: {
            $Class: $JssorBulletNavigator$
         }
       };

        var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
        var jssor_2_slider = new $JssorSlider$("jssor_2", jssor_1_options);
        var jssor_3_slider = new $JssorSlider$("jssor_3", jssor_1_options);
        var jssor_4_slider = new $JssorSlider$("jssor_4", jssor_1_options);
        var jssor_5_slider = new $JssorSlider$("jssor_5", jssor_1_options);
        var jssor_6_slider = new $JssorSlider$("jssor_6", jssor_1_options);
        var jssor_7_slider = new $JssorSlider$("jssor_7", jssor_1_options);
        var jssor_8_slider = new $JssorSlider$("jssor_8", jssor_1_options);
        var jssor_9_slider = new $JssorSlider$("jssor_9", jssor_1_options);
        var jssor_10_slider = new $JssorSlider$("jssor_10", jssor_1_options);
          /*responsive code begin*/
        /*remove responsive code if you don't want the slider scales while window resizing*/
        function ScaleSlider() {
            var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
            if (refSize) {
                refSize = Math.min(refSize, 1600);
                jssor_1_slider.$ScaleWidth(refSize);
                jssor_2_slider.$ScaleWidth(refSize);
                jssor_3_slider.$ScaleWidth(refSize);
                jssor_4_slider.$ScaleWidth(refSize);
                jssor_5_slider.$ScaleWidth(refSize);
                jssor_6_slider.$ScaleWidth(refSize);
                jssor_7_slider.$ScaleWidth(refSize);
                jssor_8_slider.$ScaleWidth(refSize);                    
                jssor_9_slider.$ScaleWidth(refSize);
                jssor_10_slider.$ScaleWidth(refSize);
           }
            else {
                window.setTimeout(ScaleSlider, 30);
           }
       }
        ScaleSlider();
        $Jssor$.$AddEvent(window, "load", ScaleSlider);
        $Jssor$.$AddEvent(window, "resize", ScaleSlider);
        $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
        /*responsive code end*/
   };

以及 div 结构：

  <div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:1024px;height:576px;overflow:hidden;visibility:hidden;">
        <!-- Loading Screen -->
        <div data-u="loading" style="position:absolute;top:0px;left:0px;background:url('img/loading.gif') no-repeat 50% 50%;background-color:rgba(0, 0, 0, 0.7);"></div>
        <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1024px;height:576px;overflow:hidden;">

          <div>
<img data-u="image" src="http://localhost/img/storyboards/st_001_web.jpg"/>
 </div>

          <div>
<img data-u="image" src="http://localhost/img/storyboards/st_002_web.jpg"/>
 </div>

  </div>
 </div>

Answer 1

我通过在 js 函数中添加一些 if 来临时解决问题：

   function ScaleSlider() {
        var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
        if (refSize) {
             if (refSize >= 1024) {
                 refSize = Math.max(refSize, 500);
               }
            else {
              refSize = Math.min(refSize, 1024); 
            }

            jssor_1_slider.$ScaleWidth(refSize);
            jssor_2_slider.$ScaleWidth(refSize);
            jssor_3_slider.$ScaleWidth(refSize);
            jssor_4_slider.$ScaleWidth(refSize);
            jssor_5_slider.$ScaleWidth(refSize);
            jssor_6_slider.$ScaleWidth(refSize);
            jssor_7_slider.$ScaleWidth(refSize);
            jssor_8_slider.$ScaleWidth(refSize);                    
            jssor_9_slider.$ScaleWidth(refSize);
            jssor_10_slider.$ScaleWidth(refSize);
       }
        else {
            window.setTimeout(ScaleSlider, 0);
       }
   }
    ScaleSlider();
    $Jssor$.$AddEvent(window, "load", ScaleSlider);
    $Jssor$.$AddEvent(window, "resize", ScaleSlider);
    $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
    /*responsive code end*/

};

我意识到，当我最大化滑块的大小时，问题就会停止， 但我实际上不希望在画廊中出现这种行为，因为超过 1024 图像开始像素化，但它比破碎的滑块要好......