Random/shuffle image display across multiple sliders

Question

I've got 3 sliders pulling from a group of images in a gallery.

1) I have it setup so that each slider pulls all of the images with no duplicates, and rotates through them. There are 12 images in the gallery, but this number can be reduced to the smallest number necessary for the function to work.

2) The initial slide image can be selected for each slider.

3) The sliders are all on one page and there can be no duplicates in the images that display across them. So it's fine to show image 6 (on slider 1), image 9 (on slider 2), image 10 (on slider 3), but not image 9, image 1, image 9.

4) There can be no duplicates in consecutive sets of slides across sliders. So if the sliders show image 4 (slider 1), image 2 (slider 2), image 9 (slider 3), then the next set shouldn't have image 3, image 9, image 6 (because of the 9 shows consecutively).

5) My question: what sort of function can I use to resolve this?

I have been trying to expand a function I found on SO, which prevents repetition of an element until all are shown:

*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;
};

I tried this function with each slider set of images, not surprisingly this resulted in more duplicates because each sliders' images were randomized and thus showed up together multiple times. I've tried randomizing across the sliders, but still no dice. Below is the code for the sliders.

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

Any thoughts on how to approach this?

Answer 1

You might do it this way (run the snippet below and see comments):

Please note that I'm displaying numbers instead of images to illustrate the algorithm better. You'll have to adapt it to your actual code.

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