Having problems with Nivoslider image animation when using Jquery mobile.
I would like the slideshow to appear on multiple pages. When i click back and forth between page 1 and page 2, the image appears hidden, then slides down and appears as it should. The problem only occurs sometimes and seems to be related to the pause between slides.
When setting the NivoSlider option "manualAdvance: true" the problem is solved. Ideally i would like this set to false so that the slideshow is automatic.
Not sure if this is a CSS problem or a JS problem?
Demo here: http://www.fando.com.au/jqm/demo_jqm.html
I've used JQM pagechange function to attempt to reset the slideshow on every page:
$(document).on("pagechange", function() {
$('[data-role="page"] #slider').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
animSpeed: 500, // Slide transition speed
pauseTime: 4000, // How long each slide will show
pauseOnHover: false, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
startSlide: 0,
});
});
Spent way too long on this bug, any help much appreciated. See full code below which is related closely to the nivo slider demo code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
<title>Nivo Slider Demo</title>
<link rel="stylesheet" href="/jqm/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/jqm/themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/jqm/themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/jqm/themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/jqm/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/jqm/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page" data-title="Title" id="page1">
<ul>
<li><a href="/jqm/demo_jqm.html#page1" >page 1</a></li>
<li><a href="/jqm/demo_jqm.html#page2" >page 2</a></li>
</ul>
<div class="theme-default">
<div id="slider"> <img src="/jqm/black_rock_property.jpg" alt="" /> <img src="/jqm/beaumaris_property.jpg" alt="" /> </div>
</div>
</div>
</div>
<div data-role="page" data-title="Title" id="page2">
<ul>
<li><a href="/jqm/demo_jqm.html#page1" >page 1</a></li>
<li><a href="/jqm/demo_jqm.html#page2" >page 2</a></li>
</ul>
<div class="theme-default">
<div id="slider"> <img src="/jqm/black_rock_property.jpg" alt="" /> <img src="/jqm/beaumaris_property.jpg" alt="" /> </div>
</div>
</div>
</div>
<script type="text/javascript" src="/jqm/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(document).on("pagechange", function() {
$('[data-role="page"] #slider').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
animSpeed: 500, // Slide transition speed
pauseTime: 4000, // How long each slide will show
pauseOnHover: false, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
startSlide: 0,
});
});
</script>
</body>
</html>
It looks like when rendering a new page, it takes the wrong height. Could you specify the height of the slider?
Let me know if that helps or not ;)