|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>JQuery Cycle Plugin - Nested Slideshows</title> |
|
<style> |
|
body { margin: 40px } |
|
#controls { width: 200px; height: 55px } |
|
#slideshow,#controls { margin: auto; overflow: hidden; } |
|
#inner { overflow: hidden; } |
|
#prev, #prev-inner { float: left; } |
|
#next, #next-inner { float: right; } |
|
</style> |
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> |
|
<script src="https://github.com/malsup/cycle/raw/master/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: 'fade', |
|
speed: 300, |
|
timeout: 0, |
|
prev: '#prev', |
|
next: '#next', |
|
before: function() { |
|
inners.cycle('stop'); |
|
$(this).cycle({ |
|
fx: 'fade', |
|
timeout: 1000, |
|
prev: '#prev-inner', |
|
next: '#next-inner', |
|
end: function() { |
|
slideshow.cycle('next'); |
|
} |
|
}); |
|
} |
|
}); |
|
}); |
|
|
|
</script> |
|
</head> |
|
<body> |
|
<div id="controls"> |
|
<a id="prev" href="#">< Outer Prev</a> |
|
<a id="next" href="#">Outer Next ></a> |
|
<br /> |
|
<a id="prev-inner" href="#">< Inner Prev</a> |
|
<a id="next-inner" href="#">Inner Next ></a> |
|
</div> |
|
|
|
<hr> |
|
<div id="slideshow"> |
|
|
|
<div class="inner-slideshow"> |
|
<div class="inner"> |
|
first: 1</br> |
|
<div id="controls"> |
|
<a id="prev-inner" href="#">< Prev</a> |
|
<a id="next-inner" href="#">Next ></a> |
|
</div> |
|
|
|
</div> |
|
<div class="inner"> |
|
first: 2</br> |
|
<div id="controls"> |
|
<a id="prev-inner" href="#">< Prev</a> |
|
<a id="next-inner" href="#">Next ></a> |
|
</div> |
|
</div> |
|
<div class="inner"> |
|
first: 3</br> |
|
<div id="controls"> |
|
<a id="prev-inner" href="#">< Prev</a> |
|
<a id="next-inner" href="#">Next ></a> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="inner-slideshow"> |
|
<div> |
|
second: 1</br> |
|
<div id="controls"> |
|
<a id="prev-inner" href="#">< Prev</a> |
|
<a id="next-inner" href="#">Next ></a> |
|
</div> |
|
</div> |
|
<div> |
|
second: 2</br> |
|
<div id="controls"> |
|
<a id="prev-inner" href="#">< Prev</a> |
|
<a id="next-inner" href="#">Next ></a> |
|
</div> |
|
</div> |
|
<div> |
|
second: 3</br> |
|
<div id="controls"> |
|
<a id="prev-inner" href="#">< Prev</a> |
|
<a id="next-inner" href="#">Next ></a> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="inner-slideshow"> |
|
<div> |
|
third: 1</br> |
|
<div id="controls"> |
|
<a id="prev-inner" href="#">< Prev</a> |
|
<a id="next-inner" href="#">Next ></a> |
|
</div> |
|
</div> |
|
<div> |
|
third: 2</br> |
|
<div id="controls"> |
|
<a id="prev-inner" href="#">< Prev</a> |
|
<a id="next-inner" href="#">Next ></a> |
|
</div> |
|
</div> |
|
<div> |
|
third: 3</br> |
|
<div id="controls"> |
|
<a id="prev-inner" href="#">< Prev</a> |
|
<a id="next-inner" href="#">Next ></a> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
</body> |
|
</html> |
prev-inner and next-inner appear to work as expected when they are outside of an 'inner' div, but they don't work reliably when inside one.