Multiple Slick.js image carousels where orientation and image index is set random

I want to have 3 Slick.js carousels in a container where

• Left side of the container is a column with 2 carousles on top of each other (25% width).
• Midle of the container contains text (25% width).
• Right side of the container has a big carousel (50% width).

The carousels do not have any connections to each other.

I want the carousels to change orientation (horisontal/vertical) and image slide index randomly. But I cannot get it to work for the big carousel.

A problem is that the images will only go upward in vertical modus.

I use Stravas image-carousel as a template. It can be found here https://www.strava.com/features.

So summarized: I cannot get the carousels to change orientation and slide index randomly. In addition I want to have a little time delay between the carousels so they do not change image slide at the same time. :)

$( document ).ready(function() {

$(".little-item").slick({
  vertical: true,
  dots: false,
  autoplay: true,
  arrows: false
});

$(".little-item-2").slick({
        vertical: true,
  dots: false,
  autoplay: true,
  arrows: false,
});


$(".big-item").slick({
        dots: false,
  autoplay: true,
  arrows: false,
  infinite: true
});

// After each time a slide is changed a random orientation and image is choosen
$('.big-item').on('afterChange', function(event, slick, currentSlide)
{
  // Vertical or horisontally?
  var nyVertikalVerdi = Math.round(Math.random());
  //console.log(nyVertikalVerdi);
  //$('.big-item').slick("slickSetOption","vertical", nyVertikalVerdi,true);
  
  // New random image
  var antallBilder = slick.slideCount;
  var nyBildeIndeks = Math.round(Math.random()*antallBilder);
  //console.log(nyBildeIndeks);
  $('.big-item').slick("slickGoTo", nyBildeIndeks, true);
  
});


});

.container {
  width: 100%;
  display: flex;
  padding: 0px;
  color: #333;
  background: #419be0;
  height: 220px;
  border: red solid 1px;
  cursor: pointer
}

.sub-panel{
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  min-height: 100%;
}

.little-item, .little-item-2, .big-item {
  text-align: center;
  display: flex;
  color: #419be0;
  background: white;
  height: 100%;
  align-items: center;
  justify-content: center;
   margin-bottom: 0;
   border: blue solid 1px;
}

.text-panel {
  min-width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: white;
}
 .text-container {
  text-align: center;
  border: green solid 1px;
}

.big-panel{
  width: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>


<div class='container'>

  <div class="sub-panel">
    <div class='little-item'>
      <div><h3>1</h3></div>
      <div><h3>2</h3></div>
      <div><h3>3</h3></div>
      <div><h3>4</h3></div>
      <div><h3>5</h3></div>
      <div><h3>6</h3></div>
    </div>

    <div class='little-item-2'>
      <div><h3>1</h3></div>
      <div><h3>2</h3></div>
      <div><h3>3</h3></div>
      <div><h3>4</h3></div>
      <div><h3>5</h3></div>
      <div><h3>6</h3></div>
    </div>
  </div>  
  
  <div class="text-panel">
    <div class="text-container">
    <h3>Image gallery</h3>
    <p>pictures from different projects.</p>
    </div>
  </div>
  
  <div class="big-panel">
    <div class='big-item'>
      <div><h3>1</h3></div>
      <div><h3>2</h3></div>
      <div><h3>3</h3></div>
      <div><h3>4</h3></div>
      <div><h3>5</h3></div>
      <div><h3>6</h3></div>
    </div>
  </div>
  
</div>