Last active
August 29, 2015 14:22
-
-
Save nesvand/69b98792290eabf51ee9 to your computer and use it in GitHub Desktop.
Slick Slider Randomiser
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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