0

jquery スライダー内に一連の 6 つのスライドがあります。( http://www.slidesjs.com/ )

技術的に言えば、これらは 6 つの個別のスライドですが、スライドはペアになっています

Group 1 = Slides 1 + 2
Group 2 = Slides 3 + 4
Group 3 = Slides 5 + 6

グループ 1、2、および 3 の順序をランダム化しようとしていますが、スライドはこれらのグループ内で正しい順序のままにする必要があります。

現在のマークアップは

 <div id="slides">
    <div class="slide">
    </div>
    <div class="slide">
    </div>
    <div class="slide">
    </div>
    <div class="slide">
    </div>
    <div class="slide">
    </div>
     <div class="slide">
    </div>
 </div>

すべてのスライドをランダム化することはできますが、これにより、スライドがごちゃ混ぜになり、ペアにならない可能性があります。

これはデータ属性で行うことができますか? これを行うためにどのような方法を使用できるかわかりません。

4

3 に答える 3

1

そのサイトのドキュメントを見ると、開始スライドを指定できるオプションがあるため、開始グループをランダム化できますが、それ以降はシーケンスを維持する必要があります。

これを行うには、次のことができます。

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

$(function(){
    var slidesPerGroup = 2;

    $("#slides").slidesjs({
        start: (getRandomInt(1, 3) * slidesPerGroup) - 1
    });
});
于 2015-10-29T15:33:52.623 に答える
0

それは美しくありません...まあ、可能な方法です（http://jsfiddle.net/bukart/c0fjq19p/1/）

var order = [[1,2],[3,4],[5,6]];

$(function() {
    var neworder = [], oldorder = [];

    oldorder = order; // better you clone here ;)

    while (oldorder.length) {
        var n = Math.floor(Math.random() * oldorder.length);
        neworder.push(oldorder[n]);
        oldorder.splice(n, 1);
    }

    var $slideBox = $('#slides');
    var $slides = $('.slide', $slideBox);

    $slides.detach();

    var $slidesArr = [];
    $slides.each(function() {
        $slidesArr.push($(this));
    });
    for (i = 0; i < neworder.length; i++) {
        for (j = 0; j < neworder[i].length; j++) {
            $slideBox.append($slidesArr[neworder[i][j]-1]);
        }
    }
});
于 2015-10-29T15:46:44.980 に答える