slick.jsを使った複数設置のスライダーの無限ループとwidthについて

###前提・実現したいこと
お世話になっております。
slick.jsを使って複数のスライダーを設置しています。

こちらのサイトを参考に無限ループに設定していますが、途中で画像が表示するまでに時間かかかってしまいます。（時間として約5秒くらい）
また、画像の幅もまちまちで横幅が揃っていませんので、variableWidthをtrueで設定しているのが原因かも？と思っています。

他にも不具合があり、下のスライドが途中で止まってしまいます。

まずは、無限ループの不具合を直したいので、お力添えをいただければ幸いです。

スライドの画像をhoverした時は下記のサイトのようにしています。
CSSのみで実装するキャプションエフェクト 20

###HTML

          <div class="slide-frame">
            <ul class="slide-top">
              <li><a href="#1">
                <figure>
                  <img src="img/image01.jpg" alt="" />
                  <figcaption>
                    <h3>タイトル</h3>
                  </figcaption>
                </figure>
              </a></li>
              <li><a href="#2">
                <figure>
                  <img src="img/image02.jpg" alt="" />
                  <figcaption>
                    <h3>タイトル</h3>
                  </figcaption>
                </figure>
              </a></li>
              <li><a href="#3">
                <figure>
                  <img src="img/image03.jpg" alt="" />
                  <figcaption>
                    <h3>タイトル</h3>
                  </figcaption>
                </figure>
              </a></li>
              <li><a href="#4">
                <figure>
                  <img src="img/image04.jpg" alt="" />
                  <figcaption>
                    <h3>タイトル</h3>
                  </figcaption>
                </figure>
              </a></li>
              <li><a href="#5">
                <figure>
                  <img src="img/image05.jpg" alt="" />
                  <figcaption>
                    <h3>タイトル</h3>
                  </figcaption>
                </figure>
              </a></li>
            </ul>
          </div>

          <div class="slide-frame">
            <ul class="slide-bottom">
              <li><a href="#1">
                <figure>
                  <img src="img/image01.jpg" alt="" />
                  <figcaption>
                    <h3>タイトル</h3>
                  </figcaption>
                </figure>
              </a></li>
              <li><a href="#2">
                <figure>
                  <img src="img/image02.jpg" alt="" />
                  <figcaption>
                    <h3>タイトル</h3>
                  </figcaption>
                </figure>
              </a></li>
              <li><a href="#3">
                <figure>
                  <img src="img/image03.jpg" alt="" />
                  <figcaption>
                    <h3>タイトル</h3>
                  </figcaption>
                </figure>
              </a></li>
              <li><a href="#4">
                <figure>
                  <img src="img/image04.jpg" alt="" />
                  <figcaption>
                    <h3>タイトル</h3>
                  </figcaption>
                </figure>
              </a></li>
              <li><a href="#5">
                <figure>
                  <img src="img/image05.jpg" alt="" />
                  <figcaption>
                    <h3>タイトル</h3>
                  </figcaption>
                </figure>
              </a></li>
              <li><a href="#6">
                <figure>
                  <img src="img/image06.jpg" alt="" />
                  <figcaption>
                    <h3>タイトル</h3>
                  </figcaption>
                </figure>
              </a></li>
            </ul>
          </div>

###js

  var topCarousel = $(".slide-top");
  var bottomCarousel = $(".slide-bottom");

  topCarousel.slick({
    slidesToShow: 2,
    asNavFor:'.slide-bottom',
    variableWidth: true,
    arrows: false,
    autoplay: true,
    autoplaySpeed: 0,
    speed: 6000,
    cssEase: 'linear',
    slidesToScroll: 1,
    waitForAnimate: true
  });

  bottomCarousel.slick({
    prevArrow: '<a class="slick-prev btn" href="#">前へ</a>',
    nextArrow: '<a class="slick-next btn" href="#">次へ</a>',
    slidesToShow: 2,
    asNavFor:'.slide-top',
    variableWidth: true,
    arrows: true,
    autoplay: true,
    autoplaySpeed: 0,
    speed: 8000,
    slidesToScroll: 1
  });

###補足情報(言語/FW/ツール等のバージョンなど)

① ② ③ ④ ⑤ ① ② ここから先の画像がなかなか表示されない