随机化和排序 Div - Slick.JS答案

【问题标题】：Randomise and Order Divs - Slick.JS随机化和排序 Div - Slick.JS
【发布时间】：2015-07-17 03:50:14
【问题描述】：

我正在使用slick.js 库并在我的网页上有以下代码行，这将允许我随机化轮播中幻灯片的顺序。

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');
});

由于我对 JavaScript/jQuery 不是很熟悉，我如何能够随机化我的幻灯片的顺序（目前是这样）除了最后一个（按顺序排列）？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

slick.js 添加了一些幻灯片的克隆，因此我建议您在致电slick() 之前将幻灯片随机化。您还可以保持您的代码几乎与您编写的代码完全相同，但添加一个检查以防止最后一张幻灯片被重新排序*。查看包含的示例。

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

如果您检查，您会发现最后一张幻灯片始终是最后一张。

【讨论】：

【解决方案2】：

我建议获取除最后一个条目之外的所有数组，将其随机化，然后将最后一个条目推送到新数组中。

关于如何洗牌，请阅读here

假设 laxt 条目是您仍想最后显示的条目，您可以（伪代码）

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

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

【讨论】：