Randomize ul li content on page load

Randomize ul li content on page load

I've tried to do this several times, and so far I can only get my content slide to randomize the order in which the slides are displayed to the user. What i mean by that is that it keeps the same order, but just displays them randomly. I actually need the ORDER of the slides randomized on page load. For example, I have a ul like so:

  1. <ul class="rotator">
  2. <li>Slide 1</li>
  3. <li>Slide 2</li>
  4. <li>Slide 3</li>
  5. <li>Slide 4</li>
  6. <li>Slide 5</li>
  7. </ul>
And then a pager that is created on the fly below it that allows the user to go back and forth between slides

  1. <div class="rotatorNavigation>
  2. <a href="#" name="1">1</a>
  3. <a href="#" name="2">2</a>
  4. <a href="#" name="3">3</a>
  5. <a href="#" name="4">4</a>
  6. <a href="#" name="5">5</a>
  7. </div>
I want the pager order to remain the same, as in 1-5, but the slides I want those to be random. So when you load the page, your order could be like 2,5,3,4,1 OR if you refresh again, your order could be 3,5,1,2,4 etc...

Right now, the jquery we have is like so:

  2. /**
  3.  * Prepare a rotator
  4.  * @return null
  5.  */
  6. (function($)
  7. {
  8. $.fn.prepRotator = function()
  9. {
  10. return this.each(function()
  11. {
  12. // Set the navigation
  13. var count = $(this).children().length;
  14. for (i = 1; i <= count; i++)
  15. {
  16. $(this).siblings('#rotatorNavigation').append("<a href='#' name='" + i + "'>" + i + "</a>");
  17. $(this).children(':eq(' + (i-1) + ')').attr('name', i);
  18. }
  19. $(this).children().preload();
  20. $(this).siblings('#rotatorNavigation').find('a:first').addClass('active');
  23. // Set the rotation
  24. function rotate()
  25. {
  27. if ($('.rotator li.active').next('li').length > 0)
  28. $('.rotator li.active').next('li').showRotatorItem();
  29. else
  30. $('.rotator li:first').showRotatorItem();
  31. globals.RotatorTimeout = setTimeout(function(){ rotate(); }, 5000);
  32. }
  33. globals.RotatorTimeout = setTimeout(function(){ rotate(); }, 5000);
  36. // Set the buttons
  37. $('#rotatorNavigation a').unbind('click').click(function()
  38. {
  39. $(".rotator").find("li[name='" + $(this).attr('name') + "']").showRotatorItem();
  40. clearTimeout(globals.RotatorTimeout);
  41. globals.RotatorTimeout = setTimeout(function(){ rotate(); }, 5000);
  42. return false;
  43. });
  44. });
  45. };
  46. })(jQuery);


  49. /**
  50.  * Show the given rotator item
  51.  * @return null
  52.  */
  53. (function($)
  54. {
  55. $.fn.showRotatorItem = function()
  56. {
  57. return this.each(function()
  58. {
  59. $(this).siblings('.active').removeClass('active').fadeOut();
  60. $(this).fadeIn().addClass('active');
  61. $('#rotatorNavigation a.active').removeClass('active');
  62. $('#rotatorNavigation').find("a[name='" + $(this).attr('name') + "']").addClass('active');
  63. var num = Number($(this).attr('name'));
  64. $('#rotatorNavigation span.triangle').animate(
  65. {
  66. left: $('#rotatorNavigation a.active').position().left + (num > 9 ? 14 : 11)
  67. }, 'fast');
  68. });
  69. };
  70. })(jQuery);
How would I randomize this?