JSSOR $ scalewidth()不用在Android Chrome上工作



我一直在努力将2个JSSOR滑块放在网页上,并且总体上有很多运气,除了我发现我已添加到页面上的响应代码在我的桌面,但是当我在Android上测试时,滑块不会调整大小。DIV是这样,我可以输出调整大小的值,并且我确认#至少通过正确传递。这是一个滑块之一的脚本,再次在台式机上工作,而不是在Android上工作...(PS在电话上,我得到的MinSliderWidth值为360px ..在我的桌面上,我可以调整大小的大小。

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

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

我已经尝试了所有事情,我看不出为什么这在移动设备上不起作用,因为我遵循了我无法找到的一切。具有讽刺意味>

请尝试将CSS规则设置为具有类名的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;

相关内容

  • 没有找到相关文章

最新更新