Я работал над размещением 2 ползунков JSSOR на веб-странице, и в целом мне очень повезло, за исключением того, что я обнаружил, что адаптивный код, который я добавил на страницу, работает на моем рабочем столе, но когда я тестирую на своем Android, слайдер не меняет размер. Div предназначен для того, чтобы я мог вывести значение изменения размера, и я подтвердил, что этот # передается правильно, по крайней мере. Вот скрипт для одного из ползунков, снова работающий на рабочем столе, а не на Android... (ps на телефоне я получаю значение minSliderWidth 360 пикселей... на моем рабочем столе я могу изменить размер меньше, чем это)
<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, но я не могу вспомнить, как я его настроил :-)