Change the initial slider every time the page loads

I am trying to randomise some slick slider slides every time the page is reloaded. I have the following code:

<div class="page-ticker-main-slider">
    <div class="slick-slider main-slick">
        <div class="slide">
            <h1>Slide one content</h1>
        </div>
        <div class="slide">
            <h1>Slide two content</h1>
        </div>
        <div class="slide">
            <h1>Slide three content</h1>
        </div>
        <div class="slide">
            <h1>Slide four content</h1>
        </div>
    </div>
</div>

And the JavaScript:

        $.fn.randomize = function(selector){

          var $elems = selector ? $(this).find(selector) : $(this).children(),
              $parents = $elems.parent();

          $parents.each(function(){
              $(this).children(selector).sort(function(){
                  return Math.round(Math.random()) - 0.5;
              }).detach().appendTo(this);
          });

          return this;

        };

        // randomize the slides and then call slick
        $('.page-ticker-main-slider').find('.main-slick').randomize('.slide');


        // Home news ticker
        $('.page-ticker-main-slider').find('.main-slick').slick({
            dots: false,
            arrows: true,
            lazyLoad: 'ondemand',
            slidesToShow: 1,
            slidesToScroll: 1,
            draggable: true,
            speed: 1000,
            autoplay: false,
            fade: true,
            easing: 'swing',
            prevArrow: '<a heref="#" class="slick-nav slick-prev"></a>',
            nextArrow: '<a heref="#" class="slick-nav slick-next"></a>',
        });

The code above is randomising the slides, however there is a lot of repetition. Ideally, every time the page refreshes I would like to always get a different slide. Eventually, they will repeat but not in a row, not after the same slide. How could I go about this?