slider-proの遷移時に読み込み完了するまでスライドが縦に並んで表示され続けている 症状の改善をしたい

Question

slider-proの遷移時に読み込み完了するまでスライドが縦に並んで表示され続けている
症状の改善をしたいです。
slider-proの画像とhtml出力は連想配列でforeachで回してるのですが画像枚数が増えるほど表示がかなり遅くなります。
(読み込み完了するまでスライドが縦に並んで表示され続ける)
htmlで書いてる分には問題ないのですが

  <script src="js/slider/dist/js/jquery.sliderPro.min.js"></script>
  <link rel="stylesheet" href="js/slider/dist/css/slider-pro.min.css"/>
  <script>
    $(document).ready(function(){
      $( '#text' ).sliderPro({
        width: 750,
        height: 500,
        fade: true,
        arrows: true,
        buttons: false,
        fullScreen: false,
        shuffle: false,
        thumbnailArrows: true,
        autoplay: false,

      });
    });
    
  </script>  

      <div class="slider-pro" id="text">
        <?php
        $imglist = [
        'text' => 'xxx_01.jpg',
        'text' => 'xxx_02.jpg',
        'text' => 'xxx_03.jpg',
        'text' => 'xxx_04.jpg',
        'text' => 'xxx_05.jpg',
        'text' => 'xxx_06.jpg',
        'text' => 'xxx_07.jpg',
        'text' => 'xxx_08.jpg',
        'text' => 'xxx_09.jpg',
        'text' => 'xxx_10.jpg'
        ];
        
        $max_num = 10;
        
        $tpl =<<<EOT
        <div class="sp-slides">
        <div class="sp-slide">
        <img class="sp-image" src="images/gallery/%s" alt="%s">
        <p class="sp-layer sp-white sp-padding" data-position="bottomLeft" data-vertical="0" data-width="100%%" data-show-transition="up">%s</p>
        </div>
        </div>
        EOT;
        $count = 0;
        foreach ($imglist as $alt=>$imgfile)
        if ($count++ < $max_num) printf($tpl . PHP_EOL, $imgfile, $alt, $alt);
        else break;
        
        ?>
        <div class="sp-thumbnails">
        <?php
        $tpl =<<<EOT
        <img class="sp-thumbnail" src="images/gallery/%s" alt="%s">
        EOT;
        $count = 0;
        foreach ($imglist as $alt=>$imgfile)
        if ($count++ < $max_num) printf($tpl . PHP_EOL, $imgfile, $alt);
        else break;
        ?>
        </div><!-- sp-thumbnails -->
        </div><!-- slider-pro -->

Answer 1

読み込みが終わるまでCSSでスライダーの部分は非表示にしておき、読み込みが完了したらJSでclassを付与、あるいは直接でもかまいませんが、display: block;などを非表示部分に適用させる形ではどうでしょうか？

もしくは現状でも下記CSSのみ追加するだけで改善するかもしれません。

.sp-slide{
  display: none;
}
.sp-slide.sp-selected{
  display: block;
}