Want to change random div order in owl-carousel slider on page reload

Question

Slider's div order should change on page load

<div class="owl-stage-outer">
  <div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 4290px;">
    <div class="owl-item active" style="width: 357.5px;">
      <div class="product-block collection-block cc-animate-init -in cc-animate-complete" data-cc-animate="">
        <div class="block-inner" style="min-height: 0px;">
          <a class="product-link" href="">
            <div class="image-cont">
              <div class="product-block__image product-block__image--primary product-block__image--active">

              </div>
            </div>
            <div class="product-info">
              <div class="product-block__title">Country A</div>
              <p>Name of Author A</p>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div class="owl-item" style="width: 357.5px;">
      <div class="product-block collection-block cc-animate-init -in cc-animate-complete" data-cc-animate="">
        <div class="block-inner" style="min-height: 0px;">
          <a class="product-link" href="">
            <div class="image-cont">
              <div class="product-block__image product-block__image--primary product-block__image--active">

              </div>
            </div>
            <div class="product-info">
              <div class="product-block__title">Country E</div>
              <p>Name of Author E</p>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div class="owl-item" style="width: 357.5px;">
      <div class="product-block collection-block cc-animate-init -in cc-animate-complete" data-cc-animate="">
        <div class="block-inner" style="min-height: 0px;">
          <a class="product-link">
            <div class="image-cont">
              <div class="product-block__image product-block__image--primary product-block__image--active">

              </div>
            </div>
            <div class="product-info">
              <div class="product-block__title">Country H</div>
              <p>Name of Author H</p>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div class="owl-item" style="width: 357.5px;">
      <div class="product-block collection-block cc-animate-init" data-cc-animate="">
        <div class="block-inner" style="min-height: 0px;">
          <a class="product-link" href="">
            <div class="image-cont">
              <div class="product-block__image product-block__image--primary product-block__image--active">

              </div>
            </div>
            <div class="product-info">
              <div class="product-block__title">Country</div>
              <p>Name of Author I</p>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="owl-nav disabled"><button type="button" role="presentation" class="owl-prev"><span aria-label="Previous">‹</span></button><button type="button" role="presentation" class="owl-next"><span aria-label="Next">›</span></button></div>
<div class="owl-dots disabled"></div>
</div>

Please visit the [help], take the [tour] to see what and [ask]. Do some research - [search SO for answers](https://www.google.com/search?q=javascript+owl+slider+random+site%3Astackoverflow.com). If you get stuck, post a [mcve] of your attempt, noting input and expected output using the [\[<>\]](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. — mplungjan, Aug 11 '23 at 08:09

Want to change random div order in owl-carousel slider on page reload

0 Answers0