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 *

JS fetch post API Data in 5 min simple way

js fetch post API is very simple way. some line of Javascript code and boom.

How to Implement Google Ads Conversion Tracking in WooCommerce

Learn how to add Google Ads tracking code to your WooCommerce thank you page effortlessly, without the need for plugins.

Allow Only Business Email Addresses in the Email Field of Elementor Forms

Find out how to restrict email fields in Elementor forms to business emails only. Improve form data quality by blocking free email domains like Gmail and Yahoo.

Elementor text editor Typography Issue [solution]

Elementor text editor Typography Issue [solution] Font size, color, line height issue fixed

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.