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

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

你可以这样做(运行下面的代码片段并查看评论(：

请注意，我显示的是数字而不是图像，以更好地说明算法。您必须使其适应您的实际代码。

// 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>