html - bxSlider showing white background in phonegap -
i using bxslider simple slider. when displayed on browser bxslider works when debugging in phonegap slider displays white background slider navigational arrows.
please help....
i had same problem cordova , jquerymobile. in ios bxslider worked charm, in android getting same, blank screen arrows you.
i think related $(document).ready() function. in way, in android dom not organized, bxslider can't make work , hides images.
if case, can solve calling bxslider init function in other event of jquerymobile, after document ready one. should work:
<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> /** images here **/ <li><img src="img/slider/business-h-c-480-640-7.jpg" /></li> </ul> </div> </div> </body>
remember put in css file rule hide slider wrapper, like:
.slider_wrapper{ visibility: hidden; }
this because calling init slider when page shows, final user should see images unformatted , brief moment after slider working. should not write display: none, because slider wouldn't work either.
hope make trick you.
Comments
Post a Comment