跨多个滑块随机/随机显示图像

Question

我从图库中的一组图像中拉出了 3 个滑块。

1) 我进行了设置，以便每个滑块拉出所有没有重复的图像，并在它们之间旋转。图库中有 12 张图片，但可以将此数量减少到功能正常工作所需的最小数量。

2) 可以为每个滑块选择初始幻灯片图像。

3) 滑块都在一个页面上，并且在它们之间显示的图像中不能有重复项。所以可以显示图片 6（滑块 1）、图片 9（滑块 2）、图片 10（滑块 3），但不能显示图片 9、图片 1、图片 9。

4) 跨滑块的连续幻灯片集不能重复。因此，如果滑块显示图像 4（滑块 1）、图像 2（滑块 2）、图像 9（滑块 3），那么下一组不应有图像 3、图像 9、图像 6（因为 9 连续显示） .

5) 我的问题：我可以使用什么样的函数来解决这个问题？

我一直在尝试扩展我在SO 上找到的一个函数，它可以防止元素重复，直到所有元素都显示出来：

*jQuery*
jQuery.fn.shuffle = function () {
    var j;
    for (var i = 0; i < this.length; i++) {
        j = Math.floor(Math.random() * this.length);
        $(this[i]).before($(this[j]));
    }
    return this;
};

我对每个滑块图像集尝试了此功能，这并不奇怪，因为每个滑块的图像都是随机的，因此会多次出现，因此会导致更多重复。我试过在滑块上随机化，但仍然没有骰子。下面是滑块的代码。

$( '.flexslider.first' ).shuffle(); // shuffled per slider

   // Flexsider initialization
    $( '.flexslider.first' ).flexslider();
    $( '.flexslider.second' ).flexslider();
    $( '.flexslider.third' ).flexslider();


*HTML*

    <div class="flexslider first">
      <ul class="slides">
        <li>
          <img src="slide5selected.jpg" />
        </li>
        <li>
          <img src="slide1.jpg" />
        </li>
        <li>
          <img src="slide2.jpg" />
        </li>
        <li>
          <img src="slide3.jpg" />
        </li>
        <li>
          <img src="slide4.jpg" />
        </li>
          <li>
          <img src="slide6.jpg" />
        </li>
        <li>
          <img src="slide7.jpg" />
        </li>
        <li>
          <img src="slide8.jpg" />
        </li>
        <li>
          <img src="slide9.jpg" />
        </li>
        <li>
          <img src="slide10.jpg" />
        </li>
        <li>
          <img src="slide11.jpg" />
        </li>
        <li>
          <img src="slide12.jpg" />
        </li>
      </ul>
    </div>

    <div class="flexslider second">
      <ul class="slides">
        <li>
          <img src="slide8selected.jpg" />
        </li>
        <li>
          <img src="slide1.jpg" />
        </li>
        <li>
          <img src="slide2.jpg" />
        </li>
        <li>
          <img src="slide3.jpg" />
        </li>
        <li>
          <img src="slide4.jpg" />
        </li>
        <li>
          <img src="slide5.jpg" />
        </li>
        <li>
          <img src="slide6.jpg" />
        </li>
        <li>
          <img src="slide7.jpg" />
        </li>
        <li>
          <img src="slide9.jpg" />
        </li>
        <li>
          <img src="slide10.jpg" />
        </li>
        <li>
          <img src="slide11.jpg" />
        </li>
        <li>
          <img src="slide12.jpg" />
        </li>
      </ul>
    </div>

    <div class="flexslider third">
      <ul class="slides">
        <li>
          <img src="slide3selected.jpg" />
        </li>
        <li>
          <img src="slide1.jpg" />
        </li>
        <li>
          <img src="slide2.jpg" />
        </li>
        <li>
          <img src="slide4.jpg" />
        </li>
         <li>
          <img src="slide5.jpg" />
        </li>
        <li>
          <img src="slide6.jpg" />
        </li>
        <li>
          <img src="slide7.jpg" />
        </li>
        <li>
          <img src="slide8.jpg" />
        </li>
         <li>
          <img src="slide9.jpg" />
        </li>
        <li>
          <img src="slide10.jpg" />
        </li>
        <li>
          <img src="slide11.jpg" />
        </li><li>
          <img src="slide12.jpg" />
        </li>
      </ul>
    </div>

关于如何解决这个问题的任何想法？

Answer 1

你可以这样做（运行下面的 sn-p 并查看 cmets）：

请注意，我使用数字而不是图像来更好地说明算法。您必须根据实际代码对其进行调整。

// define an array with your images:
var imgs = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];

// define sliders:
var sliders = document.querySelectorAll('.slider');

// rotating sliders pick a random img from the array and push it into the current slider:
var c = 0;
while (imgs.length) {
  var n = Math.random() * imgs.length | 0;
  sliders[c++].innerHTML += `<i>${imgs.splice(n, 1)}</i>`;
  c *= c !== sliders.length;
}

.slider {
  width: 80vw;
  margin: 1rem auto;
  border: solid 1px #a40
}

i {
  display: inline-block;
  margin: .5rem
}

<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>