December 30, 2024
1 min read

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Remove Website field from WordPress comment & Change cookies remember text

Remove Website field from WordPress comment & Change cookies remember text to Remember me!

Replace add to cart button with the product page link & Change add to cart text

`Replace add to cart button with product single linked to product page on shop pages in WooCommerce 3

Adding and Removing Class Based on Element Visibility in the Viewport

Add class on element if it come in view and remove not in view

Add an additional custom checkbox in the WooCommerce checkout

Add an additional custom checkbox after the terms and conditions in WooCommerce checkout we can use WooCommerce

Web Development Project in mind?

if you looking for a web developer for paid contribution to your project I am available for work.

Mukto
Mukto

Click the button below to chat with me.