malsup / cycle2

2nd gen cycling
899 stars 236 forks source link

change cycle2 to multi layer slideshow #708

Open ghost opened 9 years ago

ghost commented 9 years ago

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="#">&lt; Prev</a>
    <a id="next" href="#">Next &gt;</a>
</div>
<div id="slideshow">
    <div class="inner-slideshow">
        <img src="http://www.takajang.com/01.png" width="200" height="200">
        <img src="http://www.takajang.com/02.png" width="200" height="200">
        <img src="http://www.takajang.com/03.png" width="200" height="200">
    </div>
    <div class="inner-slideshow">
        <img src="http://www.takajang.com/04.png" width="200" height="200">
        <img src="http://www.takajang.com/05.png" width="200" height="200">
        <img src="http://www.takajang.com/06.png" width="200" height="200">
    </div>
    <div class="inner-slideshow">
        <img src="http://www.takajang.com/07.png" width="200" height="200">
        <img src="http://www.takajang.com/08.png" width="200" height="200">
        <img src="http://www.takajang.com/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 speed, delay and effect, then i can simulate multi layer.

but i can't force previous nested image to be visible.
any help or idea?