Cycle Plugin - 2 different Slideshows in one Container

Cycle Plugin - 2 different Slideshows in one Container

Hello forum,

I'm stuck on, I guess a simple thing - to explain my problem on an example, see exactly what I want to do:


I want to solve two different slider-effects, hopefully in one container - a background-image fade and a front image scrollLeft, both accessable by the same pager-navigation. I'm quite a newbie so this is hard for me.

Status quo: I slide the whole full-width-container (background-image) to achieve the background-fade.
The front-image scrollLeft is another slider-container with a negative margin-top to overlay both.

  2. <script type="text/javascript">
  3. $(document).ready(function() {
  4. $('#slider').cycle({
  5. fx: 'fade',
  6. next:   '.next', 
  7. prev:   '.prev',
  8. pager:  '#slidernav'
  9. });
  10. $('#slider2').cycle({
  11. fx: 'scrollLeft',
  12. next:   '.next', 
  13. prev:   '.prev',
  14. pager:  '#slidernav'

  16. });
  17. });
  18. </script>

  20. <div id="slider">
  21.       <div id="landscape"></div>
  22.       <div id="landscape2"</div>
  23. </div>
  24. <div id="slider2" style="margin-top:-440px;">
  25.       <img src="front1.jpg" />
  26.       <img src="front2.jpg />
  27. </div>
This is quite unsatisfying and I hope for a better solution, I'm even not sure if this could be done with jquery and is not a css-only thing.
With my solution, the pager-navigation appears double.
Is it possible to put each image into it's assigned landscape-div (like the example-page above) but make the fade-slider don't affect the images AND make a new slider detecting the images in different div's collecting them to a slide? And make the pager using both sliders?

I hope my point of view isn't too strange.
Thanks a lot.