Multiple Slick. js карусели изображений, где ориентация и индекс изображения установлены случайным образом

Question

Я хочу иметь 3 слика. js каруселей в контейнере, где

• С левой стороны контейнера находится колонка с двумя каруселями друг над другом (ширина 25%).
• В середине контейнера содержится текст (ширина 25%).
• На правой стороне контейнера имеется большая карусель (ширина 50%).

Карусели делают не связаны между собой.

Я хочу, чтобы карусели произвольно меняли ориентацию (по горизонтали / вертикали) и индекс слайдов изображения. Но я не могу заставить его работать. Я использую большую карусель в качестве примера. Когда я меняю горизонтальное направление справа налево (rtl) на горизонтальное направление слева направо, изображения остаются пустыми. Другая проблема состоит в том, что изображения будут только go в вертикальном направлении вверх.

Я использую карусель изображений Stravas в качестве шаблона. Это можно найти здесь https://www.strava.com/features.

Подводя итог: я не могу заставить карусели менять ориентацию и индекс скольжения случайным образом. Кроме того, я хочу иметь небольшую задержку между каруселями, чтобы они не меняли слайд изображения одновременно. :)

$( document ).ready(function() {

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

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


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

// After each time a slide is changed a random orientation and image is choosen
$('.big-item').on('beforeChange', function(event, slick, currentSlide)
{
  // Vertical or horisontally?
  var nyVertikalVerdi = Math.round(Math.random());
  var asBoolean = !!nyVertikalVerdi;
  //console.log(nyVertikalVerdi);
  //$('.big-item').slick("slickSetOption","rtl", asBoolean);
  if(asBoolean)
  {
    $('.big-item').slick("slickSetOption","rtl",true);
  }
  else
  {
    $('.big-item').slick("slickSetOption","rtl",false);
  }
  
  
  // 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,
  justify-content: center;
  align-items: center;
}

.sub-panel{
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin-left: 5px;
  margin-right: 5px;
  min-height: 100%;
}

.little-item, .little-item-2, .big-item {
  text-align: center;
  display: flex;
  color: #419be0;
  background: white;
  width: 100%;
  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%;
  margin-left: 5px;
  margin-right: 5px;
}

<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><img src="https://media.giphy.com/media/17RXBT2GdDwOc/giphy.gif" style='width: 100%; object-fit: contain'></div>
      <div><img src="https://media.giphy.com/media/O1UIywepuHaF2/giphy.gif" style='width: 100%; object-fit: contain'></div>
      <div><img src="https://media.giphy.com/media/smnUMpjD8UiLS/giphy.gif" style='width: 100%; object-fit: contain'></div>
    </div>

    <div class='little-item-2'>
      <div><img src="https://media.giphy.com/media/17RXBT2GdDwOc/giphy.gif" style='width: 100%; object-fit: contain'></div>
      <div><img src="https://media.giphy.com/media/O1UIywepuHaF2/giphy.gif" style='width: 100%; object-fit: contain'></div>
      <div><img src="https://media.giphy.com/media/smnUMpjD8UiLS/giphy.gif" style='width: 100%; object-fit: contain'></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><img src="https://media.giphy.com/media/17RXBT2GdDwOc/giphy.gif" style='width: 100%; object-fit: contain'></div>
      <div><img src="https://media.giphy.com/media/O1UIywepuHaF2/giphy.gif" style='width: 100%; object-fit: contain'></div>
      <div><img src="https://media.giphy.com/media/smnUMpjD8UiLS/giphy.gif" style='width: 100%; object-fit: contain'></div>
    </div>
  </div>
  
</div>