FlexSliderを使って登録した画像をスライド表示したいです。

お世話になります。
現在作成中のサイトで投稿画面でカスタムフィールドを使って画像を複数登録し
その画像をスライドショーのように表示させたいのです。

現在は画像1、画像2、画像3という形で登録（アップロード）した画像は問題なく表示されております。

いろいろ方法を検索して考えたのですが
一番近い形でできるのが
FlexSliderではないかと思いダウンロードして
紹介サイトのように
使っているテーマフォルダの中に
jQuery.flexslider-min.js（FlexSlider2の本体・縮小版）
flexslider.css（FlexSlider2のスタイルシート）
fontsフォルダ（矢印などのアイコンフォントが入っている）
をアップロードし
function.phpには

function my_scripts(){
    wp_enqueue_script( 'jquery' );
    if(is_single()){
        wp_enqueue_style( 'flexslider-css', get_template_directory_uri() . '/css/flexslider.css');
        wp_enqueue_script( 'flexslider-js', get_template_directory_uri() . '/js/jquery.flexslider-min.js', array(), '2.2.2', true);
    }
}
add_action( 'wp_enqueue_scripts', 'my_scripts');

と記載してアップ
single.phpには

</head>の前に

<?php if(is_single()): ?>
<script type="text/javascript">
jQuery(window).load(function() {
  jQuery('.flexslider').flexslider({
    animation: "slide",
    slideshow: false,
    controlNav: "thumbnails"
  });
});
</script>
<?php endif; ?>

と記載してアップしています。
CSSも

src:url('../fonts/flexslider-icon.eot');
src:url('../fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'),
    url('../fonts/flexslider-icon.woff') format('woff'),
    url('../fonts/flexslider-icon.ttf') format('truetype'),
    url('../fonts/flexslider-icon.svg#flexslider-icon') format('svg');

と記載しなおしてアップしました。

出力したい箇所には

<div class="flexslider">
<ul class="slides">
<li><img src="<?php 
$image = get_field('image01');
if( !empty($image) ): 
    // vars
    $url = $image['url'];
    $title = $image['title'];
    $alt = $image['alt'];
    $caption = $image['caption'];
    // thumbnail
    $size = 'thumbnail';
    $thumb = $image['sizes'][ $size ];
    $width = $image['sizes'][ $size . '-width' ];
    $height = $image['sizes'][ $size . '-height' ];
 
    if( $caption ): ?>
        <div class="wp-caption">
    <?php endif; ?>
    <a href="<?php echo $url; ?>" title="<?php echo $title; ?>">
        <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
    </a>
    <?php if( $caption ): ?>
        <p class="wp-caption-text"><?php echo $caption; ?></p>
        </div>
    <?php endif; ?>
<?php endif; ?></li>
<li><img src="<?php 
$image = get_field('image02');
if( !empty($image) ): 
    // vars
    $url = $image['url'];
    $title = $image['title'];
    $alt = $image['alt'];
    $caption = $image['caption'];
    // thumbnail
    $size = 'thumbnail';
    $thumb = $image['sizes'][ $size ];
    $width = $image['sizes'][ $size . '-width' ];
    $height = $image['sizes'][ $size . '-height' ];
 
    if( $caption ): ?>
        <div class="wp-caption">
    <?php endif; ?>
    <a href="<?php echo $url; ?>" title="<?php echo $title; ?>">
        <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
    </a>
    <?php if( $caption ): ?>
        <p class="wp-caption-text"><?php echo $caption; ?></p>
        </div>
    <?php endif; ?>
<?php endif; ?></li>
<li><img src="<?php 
$image = get_field('image03');
if( !empty($image) ): 
    // vars
    $url = $image['url'];
    $title = $image['title'];
    $alt = $image['alt'];
    $caption = $image['caption'];
    // thumbnail
    $size = 'thumbnail';
    $thumb = $image['sizes'][ $size ];
    $width = $image['sizes'][ $size . '-width' ];
    $height = $image['sizes'][ $size . '-height' ];
 
    if( $caption ): ?>
        <div class="wp-caption">
    <?php endif; ?>
    <a href="<?php echo $url; ?>" title="<?php echo $title; ?>">
        <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
    </a>
    <?php if( $caption ): ?>
        <p class="wp-caption-text"><?php echo $caption; ?></p>
        </div>
    <?php endif; ?>
<?php endif; ?></li>

</ul>
</div>

と記載してアップしました。

スライダーとしては機能しているのですが、
スライド画像の左上に
小さい画像が表示されない形でテキストのみで表示され
本体画像が画質が荒く
3枚登録しているのですがその3枚のサムネイルが左上の画像と同じで（テキストなし）空の画像で表示されます。

3～4枚しか登録しないので本体画像以外は消したい、というのと以上に画質が粗い原因を知りたいです。

コード中のimg src=""の""部分はカスタムフィールドで画像登録したものを出力する際に必要なコードをそのまま記入しております。

こちらは現在そのまま別の場所に記載しており（スライダーが完成したらはずす予定）、問題なく表示されており画質も劣化無くきれいに写っております。
同じものを表示しているのにスライダーだけ画質が劣化するのはなぜなのでしょうか？

知識不足で申し訳ありませんがよろしくお願いいたします。

また、もし別の方法がありましたらご教授いただけましたら幸いです。

よろしくお願いします。

以下にコードを記述いたします。

<div class="flexslider">
<ul class="slides">
<li>
      <img src="<?php 
$image = get_field('image01');
if( !empty($image) ): 
    // vars
    $url = $image['url'];
    $title = $image['title'];
    $alt = $image['alt'];
    $caption = $image['caption'];
        // thumbnail
    $size = 'thumbnail';
    $thumb = $image['sizes'][ $size ];
    $width = $image['sizes'][ $size . '-width' ];
    $height = $image['sizes'][ $size . '-height' ];

   if( $caption ): ?>
        <div class="wp-caption">
    <?php endif; ?>
    <a href="<?php echo $url; ?>" title="<?php echo $title; ?>">
        <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
    </a>
    <?php if( $caption ): ?>
        <p class="wp-caption-text"><?php echo $caption; ?></p>
        </div>
    <?php endif; ?>
   
<?php endif; ?>
    </li>
    <li>
      <img src="<?php 
$image = get_field('image02');
if( !empty($image) ): 
    // vars
    $url = $image['url'];
    $title = $image['title'];
    $alt = $image['alt'];
    $caption = $image['caption'];
        // thumbnail
    $size = 'thumbnail';
    $thumb = $image['sizes'][ $size ];
    $width = $image['sizes'][ $size . '-width' ];
    $height = $image['sizes'][ $size . '-height' ];

   if( $caption ): ?>
        <div class="wp-caption">
    <?php endif; ?>
    <a href="<?php echo $url; ?>" title="<?php echo $title; ?>">
        <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
    </a>
    <?php if( $caption ): ?>
        <p class="wp-caption-text"><?php echo $caption; ?></p>
        </div>
    <?php endif; ?>
  
<?php endif; ?>
    </li>
    <li>
      <img src="<?php 
$image = get_field('image03');
if( !empty($image) ): 
    // vars
    $url = $image['url'];
    $title = $image['title'];
    $alt = $image['alt'];
    $caption = $image['caption'];
    // thumbnail
    $size = 'thumbnail';
    $thumb = $image['sizes'][ $size ];
    $width = $image['sizes'][ $size . '-width' ];
    $height = $image['sizes'][ $size . '-height' ];
 
     if( $caption ): ?>
        <div class="wp-caption">
    <?php endif; ?>
    <a href="<?php echo $url; ?>" title="<?php echo $title; ?>">
        <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
    </a>
    <?php if( $caption ): ?>
        <p class="wp-caption-text"><?php echo $caption; ?></p>
        </div>
    <?php endif; ?>
<?php endif; ?>
    </li>
  

</ul>
</div>