title: Owl Carousel Multiple images in one slide + randomize them
body: <p>I am trying to make an Owl Carousel using (owl 2 plugin) with 3 slides where one of them has to have 2 or 3 items in it and display only one with a random order on load page.</p>
  
  <p>Every time I refresh the page I want them displayed random.</p>
  
  <p>I make a simple example here for better understanding: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.owl-carousel').owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 3
      },
      1000: {
        items: 5
      }
    }
  })
  
  var imageIndex = Math.floor((Math.random() * 2) + 1);
  document.getElementById("randomSlide" + imageIndex).style.display = "block";</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.test {
    max-width: 400px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" type="text/css"&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet" type="text/css"&gt;
  
  &lt;!-- Set up your HTML --&gt;
  &lt;div class="test"&gt;
    &lt;div class="owl-carousel"&gt;
      &lt;div&gt;
        &lt;img class="randomSlide1" style="display:none;" src="https://dummyimage.com/200x100/000/fff&amp;text=test1"&gt;
        &lt;img class="randomSlide2" style="display:none;"  src="https://dummyimage.com/200x100/000/fff&amp;text=test2"&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;img src="https://dummyimage.com/200x100/000/fff&amp;text=test3"&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;img src="https://dummyimage.com/200x100/000/fff&amp;text=test4"&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;img src="https://dummyimage.com/200x100/000/fff&amp;text=test5"&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;img src="https://dummyimage.com/200x100/000/fff&amp;text=test6"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've tried to use display: none for both images and to use this javascript method but doesn't work:</p>
  
  <pre><code>var imageIndex = Math.floor((Math.random() * 2) + 1);
  document.getElementById("randomSlide" + imageIndex).style.display = "block";
  </code></pre>