Question

Is there a good way of using jQuery cycle to randomise slides based on a weighting? Using the following markup (I am open to other suggestions):

<div id="carousel">
    <div title="Slide no. 1" data-weight="50"><h2>1</h2></div>
    <div title="Slide no. 2" data-weight="25" class="first"><h2>2</h2></div>
    <div title="Slide no. 3" data-weight="25"><h2>3</h2></div>
</div>

I would like to show slide 1 50% of the time and slides 2 & 3 25% of the time. Is there a decent way of queueing up the next slide maybe using the ‘before’ option?

Many thanks.

Answer 1

Given your very limited case (of only 1 slide requiring a longer duration) you could use use the delay timeout for your first slide (say 2000) and the timeout parameter for slides 2 & 3 (at say 1000) giving the desired effect.

The cycle plugin prameters are described as :

delay:   0,     // additional delay (in ms) for first transition (hint: can be negative) 
timeout: 4000,  // milliseconds between slide transitions (0 to disable auto advance) 

While I haven’t tried this, if you need something more advanced I suspect you could create a callback for the timeout parameter. The callback would inspect the data-weight param and use it as a weighting factor. I suspect it would work out of the box, or would only require minor modifications to the jQuery cycle plugin.