Question

我一直在努力将2个JSSOR滑块添加到网页上，总体上已经有很多运气，除了我发现我添加到页面的响应代码在我的桌面上工作，但是当我测试时我的Android，滑块没有调整大小。 div是这样我可以输出调整大小的值，我确认＃正在至少正确传递＃。这是其中一个滑块的脚本，再次在桌面上工作，而不是在android ...（手机上的ps我得到一个360px的minSliderWidth值...在我的桌面上我可以调整小一点然后那个）

<div id="value"></div>
<script type='text/javascript' src='/_scripts/jssor.slider.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
   <script>
        init_jssor_slider1 = function (containerId) {

        var options = {
            $Loop: 1,
            $DragOrientation: 1,
            $SlideDuration: 500,
            $ArrowNavigatorOptions: { 
                $Class: $JssorArrowNavigator$,
                $ChanceToShow: 2,
                $AutoCenter: 2,
                $Steps: 1
            }
        };

        var jssor_slider1 = new $JssorSlider$("slider1_container", options);

        //Responsive code
        function ScaleSlider() {

            var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;

            if (parentWidth) {
                minSliderWidth = Math.min(parentWidth, 482)

                document.getElementById("value").innerHTML = minSliderWidth;

                jssor_slider1.$ScaleWidth(minSliderWidth);
            }else{
                document.getElementById("value").innerHTML = Here;

                window.setTimeout(ScaleSlider, 30)
            }


        };

        ScaleSlider();
        $(window).bind("load", ScaleSlider);
        $(window).bind("resize", ScaleSlider);
        $(window).bind("orientationchange", ScaleSlider)

    };
</script>

相关CSS是：

#slider1_container {
display:inline-block;
position: relative;
float: left;
width: 482px;
height: 626px;
overflow: hidden;}

#slider2_container {
display:inline-block;
position: relative;
float: right;
width: 482px;
height: 626px;
overflow: hidden;}

我已经尝试了一切，我不明白为什么这不适用于移动设备，因为我已经按照我所能找到的一切无济于事。具有讽刺意味的是，因为我最初正在构建滑块，它正在自行调整大小而不使用$ ScaleWidth（），通过CSS我猜，但我不记得我是如何设置的： - ）

Answer 1

请尝试使用类名而不是id设置css规则。

.slider1_container {
display:inline-block;
position: relative;
float: left;
width: 482px;
height: 626px;
overflow: hidden;}

.slider2_container {
display:inline-block;
position: relative;
float: right;
width: 482px;
height: 626px;
overflow: hidden;}

另外，如果您将slider1_container放在另一个div中，请为div设置overflow:hidden;。

JSSOR $ ScaleWidth（）无法在Android Chrome

1 个答案: