group and sort divs

Question

I have a series of 6 slides within a jquery slider. (http://www.slidesjs.com/)

Techincally speaking these are 6 individual slides however the slides are in pairs

Group 1 = Slides 1 + 2
Group 2 = Slides 3 + 4
Group 3 = Slides 5 + 6

I am trying to randomise the order of Group 1,2 and 3 but the slides have to remain in the correct order within these groups.

The current markup is

 <div id="slides">
    <div class="slide">
    </div>
    <div class="slide">
    </div>
    <div class="slide">
    </div>
    <div class="slide">
    </div>
    <div class="slide">
    </div>
     <div class="slide">
    </div>
 </div>

I could randomise all slides however this could lead to the slides being jumbled and not paired.

Could this be done with data-attributes? I am not sure what method I could use to do this.

Answer 1

If you look at the documentation on that site there is an option to allow you to specify the starting slide so you could randomize the starting group but you would still have to keep the sequence from then on.

To do this you could do:

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

$(function(){
    var slidesPerGroup = 2;

    $("#slides").slidesjs({
        start: (getRandomInt(1, 3) * slidesPerGroup) - 1
    });
});