i generally use cycle2 for slide show, but recently i saw a different plugin: http://kreaturamedia.com/layerslider-responsive-jquery-slider-plugin/
i decided to change cycle2 to like this, as link below: http://jquery.malsup.com/cycle2/demo/nested.php
i can create nested slideshow:
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 40px }
#controls { width: 200px; height: 25px }
#slideshow,#controls { margin: auto }
#prev { float: left; }
#next { float: right; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle.all.js"></script><script>
$(document).ready(function() {
// init and stop the inner slideshows
var inners = $('.inner-slideshow').cycle().cycle('stop');
var slideshow = $('#slideshow').cycle({
fx: 'scrollHorz',
speed: 300,
timeout: 0,
prev: '#prev',
next: '#next',
before: function() {
// stop all inner slideshows
inners.cycle('stop');
// start the new slide's slideshow
$(this).cycle({
fx: 'fade',
timeout: 2000,
autostop: true,
end: function() {
// when inner slideshow ends, advance the outer slideshow
slideshow.cycle('next');
}
});
}
});
});
</script>
</head>
<body>
<div id="controls">
<a id="prev" href="#">< Prev</a>
<a id="next" href="#">Next ></a>
</div>
<div id="slideshow">
<div class="inner-slideshow">
<img src="01.png" width="200" height="200">
<img src="02.png" width="200" height="200">
<img src="03.png" width="200" height="200">
</div>
<div class="inner-slideshow">
<img src="04.png" width="200" height="200">
<img src="05.png" width="200" height="200">
<img src="06.png" width="200" height="200">
</div>
<div class="inner-slideshow">
<img src="07.png" width="200" height="200">
<img src="08.png" width="200" height="200">
<img src="09.png" width="200" height="200">
</div>
</div>
</body>
</html>
also i can change each slide effect:
malsup.com/jquery/cycle/multi.html
so if have some transparent images, grouped by inner-slideshow, and each image comes over previous by it's effect, then i can simulate multi layer.
but i can't force previous nested image to be visible.
any help or idea?