slick sliderのslideToShowの値をスワイプする度にランダムに変更させたいです。

こんにちは。wordpressでサイト制作をしていて、スライダーにはプラグインの"slick slider"を使用しています。

＊＊＊実現したいこと＊＊＊

スワイプ、またはスライドが切り替わるたびに表示させる画像の数を変更したいです。
表示させたい枚数の範囲は、１−２枚です。
例）スライド => 画像２枚表示,
２回目スライド => 画像１枚表示、
３回目スライド => 画像１枚表示、
４回目スライド => 画像２枚表示,,,, etc

＊＊＊試したこと＊＊＊

スワイプ（画像が切り替わる）するたびにランダムに整数を生成して、その整数をslideToShowの値に代入しましたが、変な挙動をします。。

例）画像１画像２、画像３画像４、画像５画像６、画像７画像８、画像９画像１０、
現在、画像１と画像２が表示されてるとして、スライドさせると一瞬だけ画像３画像４が表示されますが、すぐに画像７画像８に飛んだりと順番通りに表示されません。
言葉での説明が難しいのですいません。

beforeChangeの箇所をafterChangeなどに変更して挙動を確認しましたが変わらず。。

/* main.js */
  $('#slick').on('swipe', function () {
    const randomNum = 1 + Math.floor(Math.random() * 2);
    $(this).on('beforeChange', function () {
      $(this).slick('slickSetOption', {
        slidesToShow: randomNum,
      }, true);
    })
    console.log(randomNum)
  });

  $('#slick').slick({
    // slidesToShow: randomNum,
    slidesToScroll: 1,
    arrows: false,
    adaptiveHeight: true,
  });

<!-- single-post.php -->
<div id="slick">
 <?php if ($portfolioGallery) : ?>
  <?php foreach ($portfolioGallery as $image) : ?>
   <div class="photo side-scroll-item">
     <?php $size = ($image['width'] / $image['height'] > 1) ? 'landscape' : 'portrait';
     echo wp_get_attachment_image($image['ID'], $size, false, ['class' => 'gallery__image--' . ($index % 10) . ' ' . $size]);
     ?>
   </div>
  <?php endforeach; ?>
 <?php endif; ?>
</div>

プラグインのサイトはこちらです。
アドバイスやご指摘があればとても助かります。よろしくお願いいたします。

スタックオーバーフローでも同じ質問をしています。