Cómo ordenar elementos aleatoriamente con jQuery para Slick.js

Cómo ordenar elementos aleatoriamente con jQuery para Slick.js

Hola.

Estoy usando la librería Slick.js para mostrar una galería de fotos que se van moviendo de derecha a izquierda dentro de la página principal.

El método o constructor Slick se coloca con javascript al momento de la carga de la página sobre un div especifico a través de la class del div.

Slick.js no tiene algún método para mostrar la galería en orden aleatorio por lo que se debe resolver de otra manera. En mi caso voy a resolver con jQuery porque no tengo modo de hacerlo de otra manera.

Solución.

Lo recomendable es ordenar aleatoriamente los elementos de la galería antes de llamar al método Slick porque este agrega nuevos elementos div para hacer los efectos visuales.

Lo que hago es definir una función llamada randomize para ordenar aleatoriamente los child elements del div especificado, después llamo a esta función y finalmente llamo al método Slick.

Aquí abajo les dejo el código:


$.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;
};

$(".clientes-logo").randomize();    

$(".clientes-logo").slick({infinite: true, autoplay: true, autoplaySpeed: 4000 });


Como ven la función randomize que ordena aleatoriamente es muy útil para ordenar elementos dentro de un div por lo que la pueden usar para algún otro propósito.

Espero les sirva.