Skip to content

Instantly share code, notes, and snippets.

@nesvand
Last active August 29, 2015 14:22
Show Gist options
  • Save nesvand/69b98792290eabf51ee9 to your computer and use it in GitHub Desktop.
Save nesvand/69b98792290eabf51ee9 to your computer and use it in GitHub Desktop.
Slick Slider Randomiser
<div class="container">
<div class="slider multiple-items">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
<div><h3>7</h3></div>
<div><h3>8</h3></div>
<div><h3>9</h3></div>
</div>
</div>
function arrayShuffle(array) {
var m = array.length; // Remaining indexes to shuffle
var t;
var i;
while (m) {
// Random index of range [0, m - 1]
i = Math.floor(Math.random() * m--);
// Use temporary array to swap randomly selected index to current index (m)
t = array[m];
array[m] = array[i];
array[i] = t;
}
return array;
}
var multipleItems = $('.multiple-items div');
var shuffledItems = arrayShuffle(multipleItems);
multipleItems.remove();
$('.multiple-items').append(shuffledItems);
$('.multiple-items').slick({
dots: true,
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
}, {
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}]
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment