Random Slide Order In Slick Sider

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

slick slider normal code

$('.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

slick-random.js

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

full code for random slide

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

Random slide order in slick sider

Leave a Reply Cancel reply

More code

Sequential Fading jQuery Text Animation

Filter custom post type by Custom Field (ACF) in the admin area

Add Custom element item in wp nav menu

JS fetch post API Data in 5 min simple way

Web Development Project in mind?

Mukto