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

Popular posts from this blog

java - WrongTypeOfReturnValue exception thrown when unit testing using mockito -

php - Magento - Deleted Base url key -

android - How to disable Button if EditText is empty ? -