Div大小无法正确加载HTML

Question

I working on a phone app for a local Telecommunications business using HTML, CSS, Javascript and compiling it with Phone Gap. Currently, I've run into a problem with the sizing of the Divs using the IDangerous Swiper CSS. As I load the page, the Div shows a size of 0px x 0px, but is set for 100% width and height. It will only load after reloading the page.

<div data-role="content">
<div class="swiper-container-third center";>
    <div class="swiper-wrapper center";>
        <!--First Slide-->
        <div class="swiper-slide center"> 
        <img class="dealsCenter" src="http://web.duo-county.com/images/app_promos/sidebar-brandpromo.jpg"/>
    </div>
    <!--Second Slide-->
    <div class="swiper-slide center">
        <img class="dealsCenter" src="http://web.duo-county.com/images/app_promos/sidebar-monthly-broadband.jpg"/>
    </div>
    <!--Third Slide-->
    <div class="swiper-slide center">
        <img class="dealsCenter" src="http://web.duo-county.com/images/app_promos/sidebar-monthly-video.jpg"/>
    </div>
</div>
</div>

The class "center" is just CSS that says text-align: center !important;

I just need help with figuring what it could be that would cause the Div "swiper-container-third" to equal 1319px x 0px and the "swiper-wrapper" to equal 0px x 0px. Any help would be highly appreciated!

Answer 1

I have used this plugin in my currently project intensively. Here are few reasons:

1. .swiper-container-third and .swiper-slide does not have height specified in CSS. You must have to. Both has to have width and height equal.
2. Did you miss CSS given by IDangerous?