Question

I made slideshow with jQuery Cycle, but i have a problem with the timers. After couple cycles they’re messing up. How can i merge two cycle animations in one function and with one timer?

Thank You for any help.

xHTML:

<div id="slideshow">
  <ul>
    <li>
      <div class="image"><img src="test.jpg" /></div>
      <div class="description">Some text goes here</div>
    </li>
    <li>
      <div class="image"><img src="test.jpg" /></div>
      <div class="description">Some text goes here</div>
    </li>
    <li>
      <div class="image"><img src="test.jpg" /></div>
      <div class="description">Some text goes here</div>
    </li>
  </ul>
</div>

jQuery:

var img = $(this).find('#slideshow div.image');
var desc = $(this).find('#slideshow div.description');
$('#slideshow ul').cycle({
    fx:    'scrollHorz', 
    speed:  'fast', 
    timeout: 5000,
    next:   '.next',
    pause: 1,
    slideExpr: img
});
$('#slideshow').cycle({
    fx:    'scrollVert', 
    speed:  'fast', 
    timeout: 5000,
    next:   '.next',
    pause: 1,
    slideExpr: desc
});

Answer 1

I think you should:

1. Make your own custom function for the time handling issue (a rather simple JS function will do the trick).
2. Set the “timeout” property in your cycles to 0 so it won’t auto-avance.
3. Use the available commands “prev” and “next” in your custom function in this form:

---

$('#slideshow').cycle('next');

I see the approach in your code, gotta thank you the great idea you just gave me tho.