我一直在努力将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;