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

WP Plugin Dev

Sequential Fading jQuery Text Animation

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

Jquery Replace specific text in all element

...

Animated jQuery Counter Up with the Intersection Observer API

Learn how to create a simple counter animation usi ...

Add Classe when the item visible

Add class on scroll to viewport jquery code ...

Jquery Custom Tab

...

top