Question

jssor是非常好的滑块！它适用于动态生成的图像。谢谢你的伟大工具。只剩下一个问题。

滑块容器的宽度是640px，我希望容器在外部容器div变小时调整大小。我很好地根据需要缩小图像。然而， 1.当我再次调整浏览器大小并进行新的图像搜索时。滑块占据整个外部div宽度。所以它只显示整个区域的宽度超过640px。 2.响应性不适用于移动设备。我在Android设备上测试了chrome和android浏览器。

我正在使用的代码代码1：

   var jssor_slider1 = new $JssorSlider$("slider1_container", options);
   function ScaleSlider() {
     var parentWidth = $("#slider1_container").parent().width();
           if (parentWidth) {
              jssor_slider1.$ScaleWidth(parentWidth);
           }
   }
   ScaleSlider();
   //Scale slider while window load/resize/orientationchange.
   $(window).bind("load", ScaleSlider);
   $(window).bind("resize", ScaleSlider);
   $(window).bind("orientationchange", ScaleSlider);

代码2：

   var jssor_slider1 = new $JssorSlider$("slider1_container", options);
    if ( $(window).width() > 900 ) {
        function ScaleSlider() {
           var parentWidth = $("#slider1_container").parent().width();
            if (parentWidth) {
                jssor_slider1.$ScaleWidth(parentWidth);
             }
         }
    }
     //Scale slider after document ready
     ScaleSlider();
     if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
     //Capture window resize event
         $(window).bind("resize", ScaleSlider);
     }

Answer 1

请调整滑块的宽度不超过640。

   var jssor_slider1 = new $JssorSlider$("slider1_container", options);
   function ScaleSlider() {
     var parentWidth = $("#slider1_container").parent().width();
           if (parentWidth) {
              jssor_slider1.$ScaleWidth(Math.min(parentWidth, 640));
           }
   }
   ScaleSlider();
   //Scale slider while window load/resize/orientationchange.
   $(window).bind("load", ScaleSlider);
   $(window).bind("resize", ScaleSlider);
   $(window).bind("orientationchange", ScaleSlider);

jssor滑块响应代码有效，但在浏览器宽度已满时无法恢复

1 个答案: