Randomize jQuery slider content (ul) while retaining order of slide pager

Question

We have a custom content slider, made up of an unordered list. There is a function controlling the slide of the content, and then we've also got a function that creates pager buttons on the fly, which allows the user to click back and fourth between the slides, labeled with numbers 1-6.

I'm trying to randomize the order of the content slides, so that the same combination of slides doesn't appear everytime the page is loaded, however the pager still retains the order it animates in.

The functions are here:

/**
 * Prepare a rotator
 * @return null
 */
(function($)
{
    $.fn.prepRotator = function()
    {
        return this.each(function()
        {
            // Set the navigation
            var count = $(this).children().length;
        for (i = 1; i <= count; i++)
            {
                $(this).siblings('#rotatorNavigation').append("<a href='#'      name='" + i + "'>" + i + "</a>");
            $(this).children(':eq(' + (i-1) + ')').attr('name', i);
        }
        $(this).children().preload();
        $(this).siblings('#rotatorNavigation').find('a:first').addClass('active');


        // Set the rotation
        function rotate()
        {

            if ($('.rotator li.active').next('li').length > 0)
                $('.rotator li.active').next('li').showRotatorItem();
            else
                $('.rotator li:first').showRotatorItem();
            globals.RotatorTimeout = setTimeout(function(){ rotate(); }, 5000);
        }
        globals.RotatorTimeout = setTimeout(function(){ rotate(); }, 5000);


        // Set the buttons
        $('#rotatorNavigation a').unbind('click').click(function()
        {
            $(".rotator").find("li[name='" + $(this).attr('name') + "']").showRotatorItem();
            clearTimeout(globals.RotatorTimeout);
            globals.RotatorTimeout = setTimeout(function(){ rotate(); }, 5000);
            return false;
        });
    });
};
})(jQuery);


/**
 * Show the given rotator item
 * @return null
 */
(function($)
{
$.fn.showRotatorItem = function()
{
    return this.each(function()
    {
        $(this).siblings('.active').removeClass('active').fadeOut();
        $(this).fadeIn().addClass('active');
        $('#rotatorNavigation a.active').removeClass('active');
        $('#rotatorNavigation').find("a[name='" + $(this).attr('name') + "']").addClass('active');
        var num = Number($(this).attr('name'));
        $('#rotatorNavigation span.triangle').animate(
        {
            left:       $('#rotatorNavigation a.active').position().left + (num > 9 ? 14 : 11)
        }, 'fast');
    });
};
})(jQuery);

Then structure for the content slides looks like this:

<ul id="homeRotator" class="rotator">
  <li class="active">
  <a href="products/parts">
    <span class="back">
    <img alt="Tool" src="images/homepage/rotator/tool.jpg" width="960" height="364" />
    <span class="heading">
      <br />Keep a good thing going.
    </span>
    </span>
    <span class="desc">
    <img alt="2-Cycle parts" src="images/homepage/img-2-cycle-parts.jpg" width="287" height="204" />
        <span class="copy">
          Genuine Detroit Diesel 2-Cycle parts are built to the latest engineering
specifications, resulting in uncompromised quality.
    </span>
    <span class="link">> Parts</span>
    </span>
  </a>
  </li>
<li>
  <a href="about/heritage">
    <span class="back">
    <img alt="Green Engine" src="images/homepage/rotator/img-detroit-diesel-engine-green.jpg" width="960" height="364" />
    <span class="heading">
      <br />A legacy of excellence.
    </span>
    </span>
    <span class="desc">
    <img alt="GM Diesel Flag" src="images/homepage/img-heritage.jpg" width="287" height="204" />
    <span class="copy">
          Since 1938, our engines have powered entire industries, including construction,
agricultural, marine, oil and gas, mining, rail, power generation and defense.
    </span>
    <span class="link">> Heritage</span>
    </span>
  </a>
  </li>
<li>
  <a href="stories-gallery/overview">
    <span class="back">
    <img alt="Deception Motor Master" src="images/homepage/rotator/decepticon.jpg" width="960" height="364" />
    <span class="heading">
          Reports from the field. 
      <br />Water. And road.
    </span>
    </span>
    <span class="desc">
    <img alt="Deception Motor Master" src="images/homepage/eng_ine.jpg" width="287" height="204" />
    <span class="copy">
      Read stories about earth movers, hot rods, ferries, yachts, trucks and more. All
  powered by Detroit Diesel 2-Cycle engines.
    </span>
    <span class="link">> Stories</span>
    </span>
  </a>
  </li>
 <li>
  <a href="contact/sales-and-service-locator">
    <span class="back">
    <img alt="Reliabuilt 92 Engine" src="images/homepage/rotator/img-reliabuilt-92-engine.jpg" width="960" height="364" />
    <span class="heading">
      <br />Local support. Worldwide.
    </span>
    </span>
    <span class="desc">
    <img alt="MTU Clock Screensaver" src="images/homepage/img-distributor-locator.jpg" width="287" height="204" />
    <span class="copy">
      No matter where you are, MTU’s global sales and service network is committed to 
      providing you with genuine Detroit Diesel 2-Cycle parts, service and assistance.
    </span>
    <span class="link">> Sales and service locator</span>
    </span>
  </a>
  </li>
<li>
  <a href="extras/gallery/official-gallery">
    <span class="back">
    <img alt="Reliabuilt 92 Engine" src="images/homepage/rotator/pete.jpg" width="960" height="364" />
    <span class="heading">
      <br />Metal and machines on display.
    </span>
    </span>
    <span class="desc">
    <img alt="2-Cycle Distributor Locator" src="images/homepage/marines.jpg" width="287" height="204" />
    <span class="copy">
      View photos and videos of 2-Cycle-powered vehicles and equipment, 
      product shots and historical images. Or submit your own. 
    </span>
    <span class="link">> Gallery</span>
    </span>
  </a>
  </li>
  <li>
    <a href="products/engines">
      <span class="back">
      <img src="images/homepage/rotator/img-engine-close-up.jpg" width="960" height="364" />
      <span class="heading">
        <br />A powerful commitment.
      </span>
      </span>
      <span class="desc">
          <img alt="Close up of 2-Cycle Engine" src="images/homepage/img-detroit-diesel-engine-cu.jpg" width="287" height="204" />
      <span class="copy">
        As the sole owner of the Detroit Diesel 2-Cycle product line, MTU is committed to
  providing parts, service and support for the long term.
      </span>
      <span class="link">> Engines</span>
      </span>
    </a>
    </li>


</ul>

And this is the html structure for the pager

<div id="rotatorNavigation">

      <span class="triangle"></span>

    </div>
    <div id="flameBottom">

      <div class="left">
        <h1>Detroit Diesel 2-Cycle</h1>
        <div class="purpleCornerLeft"></div>
      </div>


      <div class="right">

        <a class="find-a-distributor" href="contact/sales-and-service-locator">
          <span class="img">
            <img src="images/homepage/img-small-engine.png" />
          </span>
          <span class="copy">
            <span class="heading">
              Sales and service locator
            </span>
            <span class="cta">
              > Search
            </span>
          </span>
        </a>

        <a class="got-a-story" href="stories-gallery/overview">
          <span class="img">  
            <img src="images/homepage/img-notepad.png" />
          </span>
          <span class="copy">  
            <span class="heading">
              2-Cycle stories
            </span>
            <span class="cta">
              > Read and share your own
            </span>
          </span>
        </a>

        <div class="grayCornerRight"></div>

      </div>


    </div>

I'm just having a difficult time randomizing the entire thing. I can get it to randomize the second slide on, but it still retains the same order - which is not what I want. I want the whole thing to be completely random. Any help/insight would be greatly appreciated!

I've thought about duplicating the ul 6x then showing a random version on page load, but that just seems way too redundant when I know there is someway to randomize it as is.

Answer 1

There's a bit more code above than I can review just now, but assuming that it's OK to literally rewrite the content, rather than simply display them in a different order, you could pull the slide contents into a jQuery wrapped set, shuffle the set, and replace the contents of the homeRotator UL with the new content:

// http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
function shuffle(array) {
    var currentIndex = array.length,
        temporaryValue, randomIndex;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {

        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }

    return array;
}

var $slides = $('#homeRotator li');
$slides = shuffle($slides);
$('#homeRotator').empty().prepend($slides);

Fiddle demo: http://jsfiddle.net/Palpatim/7rzE4/

If not, then you could do something similar with whatever pointer