Randomize CSS3 Задержка анимации

Question

Я использую CSS3 для создания слайд-шоу с использованием ol.slideshow. Работает.

Я хочу случайный порядок изображений. Поскольку я использую li:nth-child(x) {animation-delay: x;} , чтобы показать и скрыть свои изображения, бесполезно рандомизировать порядок моих ol элементов.

Чтобы создать обходной путь, я думал о добавлении классов nth-child-1 к nth-child-6 в случайном порядке, чтобы мои li элементов под нагрузкой, но я не в состоянии создать такой фрагмент кода.

JS FIDDLE DEMO (Почему анимация не работает внутри jsfiddle?)

Как бы я рандомизации мои li элементы:

$.fn.randomize = function(selector){ 
    var $elems = selector ? $(this).find(selector) : $(this).children(), 
    $parents = $elems.parent(); 
    $parents.each(function(){ 
     $(this).children(selector).sort(function(){ 
     return Math.round(Math.random()) - 0.5; 
     }).detach().appendTo(this); 
    }); 
    return this; 
}; 
$('ol.slideshow').randomize(); 

Answer 1

Это то, что я мог придумать. Одиночная развертка. Нет жесткого кодирования количества элементов в слайд-шоу и случайного класса при каждом запуске с nth-child-1

var elems = $("ol.slideshow li"); //gives you an array of li 

var len = elems.length, randomNum = 0, randomEl, counter = 1; 

//we keep removing the elements randomly giving them a class 
//till we are not left with any element 
//this way you won't have to hard code "6" - the number of slideshow elements 
while(len--) { 
    randomNum = parseInt(Math.random()*len, 10); 
    randomEl = elems.splice(randomNum, 1); 
    $(randomEl).addClass('nth-child-' + counter); 
    counter++; 
}