jQuery slideshow with per-slide transitions/durations

Question

I am searching for a jQuery slideshow that supports per-slide timeouts and transitions.

From my research, it seems like the Cycle Plugin is the closest fit, as it has an appreciable selection of default transitions, and I've even found out how to set per-slide timeouts from this thread:

jQuery Slideshow with Random Timeouts (as well as their FAQ pages on the subject)

However, I do not see a way of setting per-slide transitions, which is a deal breaker. (Short of maybe modifying the existing plugin, which seems like it could be getting in deeper than I'd like)

Can anyone advise on a way to accomplish what I am looking for? I am willing to rewrite the plugin if I have to, but maybe someone knows of a quicker/easier way.

Thanks in advance!

UPDATE: I managed to meet my requirements by generating a list of comma-separated transitions, and passing them as a value of the fx: option of the .cycle plugin. For reference, I used the FAQ page linked above for the per-slide timings, and the " This page shows how to use multiple effects on a single slideshow. " page for the per-slide transitions.

Answer 1

I managed to meet my requirements by generating a list of comma-separated transitions, and passing them as a value of the fx: option of the .cycle plugin. For reference, I used the FAQ page linked above for the per-slide timings, and the " This page shows how to use multiple effects on a single slideshow. " page for the per-slide transitions.

Answer 2

This is now a lot easier with the Cycle2 plugin .

For example (not tested, but copied from the Cycle2 site ):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://jquery.malsup.com/cycle2/jquery.cycle2.js"></script>
<script src="http://jquery.malsup.com/cycle2/jquery.cycle2.tile.js"></script>

<div class="cycle-slideshow" 
    data-cycle-timeout=0
    data-cycle-next="#next5"
    data-cycle-prev="#prev5"
    >
    <img src="http://jquery.malsup.com/cycle2/images/p1.jpg" data-cycle-fx=tileSlide data-cycle-tile-vertical=false>
    <img src="http://jquery.malsup.com/cycle2/images/p2.jpg" data-cycle-fx=tileBlind data-cycle-tile-count=12>
    <img src="http://jquery.malsup.com/cycle2/images/p3.jpg" data-cycle-fx=tileSlide data-cycle-tile-count=4>
    <img src="http://jquery.malsup.com/cycle2/images/p4.jpg" data-cycle-fx=tileBlind data-cycle-tile-vertical=false>
</div>

No javascript required!