slick sliderのサムネイルを縦に流す

HTML

<div class="gallerylist">
    <div class="slide">
        <div class="item">
                 <img src="../images/gallery1.png" alt="">
        </div>
        .....
    </div>
    <div class="slide-thumbnail">
        <div class="item">
                 <img src="../images/gallery1.png" alt="">
        </div>
        .....
    </div>
</div>

サムネイルのjsでverticalをtrueにする

$(function() {
    var slide_main = $(".slide").slick({
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      fade: true,
      asNavFor: ".slide-thumbnail"
    });
    var slide_sub = $(".slide-thumbnail").slick({
      infinite: true,
      slidesToShow: 4,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 4000,
      speed: 400,
      asNavFor: ".slide",
      focusOnSelect: true,
      vertical: true,　　　　//ここがポイント
      verticalSwiping: true,　　　　//ここがポイント
      responsive: [
        {
          breakpoint: 768,
          settings: {
            centerMode: true,
            vertical: false,
            verticalSwiping: false,
            slidesToShow: 3,
            adaptiveHeight: true
          }
        }
      ]
    });
    var open_window_Width = $(window).width();
    $(window).resize(function() {
      var width = $(window).width();
      if (open_window_Width != width) {
        slide_main.slick("setPosition");
        slide_sub.slick("setPosition");
      }
    });
  });

cssでslideとslide-thumbnailを横に並べる

.gallerylist {
    display: flex;
}