Using malsup cycle plugin - displays only first 2 images of 4 on iPad

Using malsup cycle plugin - displays only first 2 images of 4 on iPad

I would be grateful for any assistance.

I have 4 banner images which cycle beautifully on a monitor - but on an iPad only cycles from the first image to the second image and then stops. Demo page is: http://www.bikevents.com.au/Bikevents/index3.html

The CSS and HTML used is below:

#slideshow { height: 200px; width: 672px; padding: 0; margin: 0; }
#slideshow img { display: none; padding: 0px; width: 672px; height: 200px; top: 0; left: 0; background-color: #dcdcdc; }
#slideshow img.first { display: block; }

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slideshow').cycle({
fx:     'fade',
speed: 1200,
timeout: 4000
});
});
</script>

<div id="slideshow">
<a href="Sat_100km.html"><img src="Images/Animations/Intro-100-CycleCover-01.png" width="672" height="200" class="first" /></a>
<a href="Sun_125km.html"><img src="Images/Animations/Intro-125-TORQ-01.png" width="672" height="200" /></a>
<a href="Sat_165km.html"><img src="Images/Animations/Intro-165-SHCCC-01.png" width="672" height="200" /></a>
<a href="Sat_180km.html"><img src="Images/Animations/Intro-200-BikeBuller-02.png" width="672" height="200" /></a>
</div>



























    • Topic Participants

    • mark