bxSlider показывает белый фон в телефонной пробке

Question

bxSlider показывает белый фон в телефонной пробке

0

Я использую bxSlider для простого слайдера. При отображении в браузере bxSlider отлично работает, но при отладке в телефонной записях слайдер отображает белый фон со стрелками навигационных стрелок.

Пожалуйста помоги....

wayzz 20 март 2014, в 12:25

Источник

Теги:

html

cordova

bxslider

1 ответ

Ещё вопросы

slk · Accepted Answer · 2014-07-08T13-32-00.000Z

У меня была такая же проблема с Cordova и JqueryMobile. В iOS bxSlider работал как шарм, но в android я получал тот же чистый экран со стрелками, как вы.

Я думаю, что это связано с функцией $ (document).ready(). В некотором смысле, в Android DOM не очень организован, поэтому bxSlider не может выполнять свою работу и скрывает все ваши изображения.

Если это ваш случай, вы можете разрешить вызов функции init bxSlider в другом случае jquerymobile, после того как документ готов. Что-то вроде этого должно работать:

<body>
    <div data-role="page" id="slider">
        <script>
            $('#slider').on('pageshow', function(){
                 $('.bxslider').bxSlider({
                     onSliderLoad: function(){
                          $('.slider_wrapper').css('visibility', 'visible');
                     }    
             });
        </script>
        <div data-role="header" data-position="fixed">
            <h1>Slider page</h1>
        </div>
        <div class="slider_wrapper">
            <ul class="bxslider">
                <li><img src="img/slider/business-h-c-480-640-10.jpg" /></li>
                /** Your images here **/
                <li><img src="img/slider/business-h-c-480-640-7.jpg" /></li>
            </ul>
        </div>
    </div>
</body>

Не забудьте поставить в свой файл css правило, чтобы скрыть ползунок, например:

.slider_wrapper{
    visibility: hidden;
}

Это связано с тем, что вы вызываете слайдер init при показе страницы, поэтому конечный пользователь должен видеть ваши изображения неформатированными и через короткий промежуток времени после работы слайдера. Вы не должны писать отображение: нет, потому что слайдер тоже не работает.

Надеюсь, это поможет тебе.