Randomise and Order Divs - Slick.JS

Question

Im using the slick.js library and have the following lines of code on my web page, which will allow me to randomise the order of the slides in the carousel.

JavaScript/jQuery:

$('.qa').on('init', function(event, slick, currentSlide, nextSlide) {
    // Randomize the slides and then run slick slider
    $.fn.randomize = function(selector) {
        var $elems = selector ? $(this).find(selector) : $(this).children(),
        $parents = $elems.parent();

        $parents.each(function() {
            $(this).children(selector).sort(function(){
                return Math.round(Math.random()) - 0.5;
            }).detach().appendTo(this);
        });

        return this;
    };

    $('.qa').find('.slick-track').randomize('.slick-slide');
});

As I'm not very familiar with JavaScript/jQuery, how would I be able to randomise the order of my slides (which it currently does) except for the very last one (which would be in its order)?

Answer 1

slick.js adds a clone of some of the slides, for this reason I would recommend that you randomize the slides before you call slick(). You can also keep your code almost exactly as you have written it but add one check to prevent the last slide from being reordered*. Checkout the included example.

$.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;
};

$(".qa").randomize().slick();

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.6/slick.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.6/slick.min.js"></script>
<div class="qa">
    <div>your content 1</div>
    <div>your content 2</div>
    <div>your content 3</div>
    <div>your content 4</div>
    <div>your content 5</div>
    <div>your content 6</div>
    <div>your content 7</div>
    <div>your content 8</div>
    <div>I am always last</div>
</div>

If you inspect you will see that the last slide is always last.

Answer 2

I would recommend getting an array of all but the last entry, randomizing it, and then pushing the last entry onto the new array.

On how to shuffle, read here

Assuming the laxt entry is the one you still want to display last, you can (pseudocode)

var array = [allmyelems];
var last = array.pop();
shuffle(array);
array.push(last);

function shuffle(array) {
    //function from above link
}