JSSOR $ScaleWidth() не работает на Android Chrome

Я работал над размещением 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, но я не могу вспомнить, как я его настроил :-)


person Deyfenn Slayd    schedule 26.03.2018    source источник
comment
URL, где вы видите -› mandysaile.com/indextest.html У меня включен только один ползунок JSSOR это прямо сейчас, как я устранение неполадок.   -  person Deyfenn Slayd    schedule 26.03.2018
comment
Можно ли получить доступ к ‹div data-u=slides через css? Я мог бы просто отправить ширину и высоту в css для обычного и использовать медиа-запрос, чтобы установить его для узкого (мобильного).   -  person Deyfenn Slayd    schedule 27.03.2018


Ответы (1)


Пожалуйста, попробуйте установить правило 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, установите overflow:hidden; для div.

person jssor    schedule 29.03.2018
comment
Если я изменю идентификатор на класс, весь слайдер сломается? сейчас это основная структура: ‹div class=slider1_container› ‹div data-u=slides style=position: absolute; слева: 0px; верх: 0px; ширина: 482 пикселя; высота: 626 пикселей; переполнение: скрыто;› ‹div›‹img data-u=image src=home/_images/Home_SmallSliderLeft_01.jpg /› - person Deyfenn Slayd; 04.04.2018
comment
См. <div id="slider1_container" class="slider1_container"> - person jssor; 05.04.2018
comment
Я добавил эту строку в свой html и изменил ссылку на элемент в моем css на .slider1_container { ... но ничего не сделал. Слайдер работает на компьютере правильно, но не изменяет размер на мобильном телефоне. Я попросил некоторых друзей протестировать их на своих небольших планшетах и ​​телефонах, и они получили то же самое. Нет изменения размера? :-( Возможно, есть способ сослаться на элемент data-u в моем css? Я мог бы просто добавить заявление о медиа и сдвинуть ползунок таким образом для небольших устройств. - person Deyfenn Slayd; 06.04.2018
comment
Заявление СМИ css не сделает ползунок отзывчивым. - person jssor; 09.04.2018
comment
Поскольку размер ползунка будет изменяться в соответствии с шириной его контейнера, убедитесь, что контейнер реагирует. Кроме того, попробуйте добавить overflow:hidden; для контейнера. - person jssor; 09.04.2018