Random Slide Order In Slick Sider | Code For Developers

Random slide order in slick sider

Change slick carousel slide order randomly

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

Implementing WooCommerce Shop Page Quantity Input and Plus (+) Minus (-) Button with simple Code

Enhance the user experience on your WooCommerce we ...

Next Code

How to Implement Google Ads Conversion Tracking in WooCommerce

Learn how to add Google Ads tracking code to your ...

Leave a Reply

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

If you find it useful

Buy me a coffee

ACF

Elementor

JavaScript

jQuery

Others

PHP

WooCommerce

WordPress

Jquery Replace specific text in all element

...

Add Classe when the item visible

Add class on scroll to viewport jquery code ...

Adding and Removing Class Based on Element Visibility in the Viewport

Sometimes we need to dynamically manage classes ba ...

Sequential Fading jQuery Text Animation

This code animates text using jQuery, creating a s ...

Jquery Custom Tab

...

top