all pages being shown in mobile browser

[rajurao]

Hi,

I have a simple implementation of a multi-page slide show in auto mode. And it works fine on the desktop. However, on mobile browsers (safari on iPhone and chrome on android) all the slides appear overlapped.

My css seems fine (shown below).

.swipe { overflow: hidden; visibility: hidden; position: relative; } .swipe-wrap { overflow: hidden; position: relative; } .swipe-wrap > div { float:left; width:100%; position: relative; }

and the html is

   <div id='mySwipe' class='swipe'>
        <div class='swipe-wrap'>
            <div>
                <img src="images/screen_0.png" />
            </div>
            <div>
                <img src="images/screen_1.png" onclick="javascript:showslide(1);" />
            </div>
            <div>
                <img src="images/screen_2.png" onclick="javascript:showslide(2);" />
            </div>
            <div>
                <img src="images/screen_3.png" onclick="javascript:showslide(3);" />
            </div>
            <div>
                <img src="images/screen_4.png" onclick="javascript:showslide(4);" />
            </div>
            <div>
                <img src="images/screen_5.png" onclick="javascript:showslide(5);" />
            </div>
        </div>                
    </div>

Cannot figure out what am I doing wrong?

Thanks,

• R

[webflashing]

Were you able to solve this issue? I'm facing it too.