I am going to show how we can randomize slick slider order so that every time the page refreshes slide shows differently.
Our old slider activation code is something like this
$('.raaa_hero_slider').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 3000,
arrows: false,
fade: true,
cssEase: 'linear',
pauseOnHover: false
});
Now, we are going to add a magic spell. Thanks to zexeder for this gist
$.fn.randomize = function (selector) {
var $elems = selector ? $(this).find(selector) : $(this).children(),
$parents = $elems.parent();
$parents.each(function () {
$(this).children(selector).sort(function (childA, childB) {
// * Prevent last slide from being reordered
if($(childB).index() !== $(this).children(selector).length - 1) {
return Math.round(Math.random()) - 0.5;
}
}.bind(this)).detach().appendTo(this);
});
return this;
};
Now our final code will be look like this
$.fn.randomize = function (selector) {
var $elems = selector ? $(this).find(selector) : $(this).children(),
$parents = $elems.parent();
$parents.each(function () {
$(this).children(selector).sort(function (childA, childB) {
// * Prevent last slide from being reordered
if($(childB).index() !== $(this).children(selector).length - 1) {
return Math.round(Math.random()) - 0.5;
}
}.bind(this)).detach().appendTo(this);
});
return this;
};
// adding randomize() function before slider active
$('.raaa_hero_slider').randomize().slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 3000,
arrows: false,
fade: true,
cssEase: 'linear',
pauseOnHover: false
});