flexsliderがスマホとタブレットで動かない

課題

WordPressでオリジナルテーマを作成しています。そこでスライドショーを導入するためにFlexSliderを用いることにしました。
パソコンでは問題なく動いています。ちなみにGoogle Chrome上でパソコンでデベロッパーツールを使用して、スマホサイズやタブレットサイズではスライダーは問題なく表示されます。

しかし、実機のスマートフォンやタブレットで読み込みをすると、
ずっと読み込み中になってしまい、表示されません。
コードは以下のようになっています。
試しに

<div class="flexslider carousel"> <ul class="slides"> の部分と </ul> </div> の部分をコメントアウトするときちんとデータはスマホ実機でもタブレット実機でも表示された。

flexsliderに関する
読み込んでいるファイル
flexslider.css
jquery.flexslider.js
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js


 <div class="flexslider carousel">
          <ul class="slides">
         
<?php
  $arg = array(
             'posts_per_page' => 3, // 表示する件数
 );
  $posts = get_posts( $arg ); if( $posts ): ?>
            
    <?php foreach ( $posts as $post ) :setup_postdata( $post ); ?>
    <?php if (has_post_thumbnail()) : ?>
     <?php the_post_thumbnail('thumbnail'); ?>
    <?php else : ?>
            <li>
            <?php $After = SCF::get('test'); echo wp_get_attachment_image( $test , 'large' );?>
                <?php echo $img_gallery_item01; ?>
                <a href="<?php the_permalink(); ?>">
                 <span><?php the_title(); ?></span>
                </a>
            </li>
    <?php endif ; ?>

<?php endforeach; ?>

          </ul>
        </div>
<?php endif; wp_reset_postdata();?>

試したこと

footerで読み込んでいるflexsliderの記述を変えてみました。
$の表記をjQueryに変更してみたが、変化なし。

jQuery(window).on("load", function () { 
	jQuery('.flexslider').flexslider({
        animation: "slide",
        animationLoop: false,
        itemWidth: 280,
        itemMargin: 80,
        mousewheel: true,
        rtl: true
      });

どなたかお力添えをお願いいたします。

追記

 <div class="flexslider carousel">
          <ul class="slides">
         
<?php
  $arg = array(
             'posts_per_page' => 3, // 表示する件数
 );
  $posts = get_posts( $arg ); if( $posts ): ?>
            
    <?php foreach ( $posts as $post ) :setup_postdata( $post ); ?>
    <?php if (has_post_thumbnail()) : ?>
     <?php the_post_thumbnail('thumbnail'); ?>
    <?php else : ?>
            <li>
            <?php $After = SCF::get('test'); echo wp_get_attachment_image( $test , 'large' );?>
                <?php echo $img_gallery_item01; ?>
                <a href="<?php the_permalink(); ?>">
                 <span><?php the_title(); ?></span>
                </a>
            </li>
    <?php endif ; ?>

<?php endforeach; ?>

          </ul>
        </div>
<?php endif; wp_reset_postdata();?>

試したこと

footerで読み込んでいるflexsliderの記述を変えてみました。
$の表記をjQueryに変更してみたが、変化なし。

jQuery(window).on("load", function () { 
	jQuery('.flexslider').flexslider({
        animation: "slide",
        animationLoop: false,
        itemWidth: 280,
        itemMargin: 80,
        mousewheel: true,
        rtl: true
      });

追記
試したこと

<ul class="slide> </ul> を試しにコメントアウトしてみたところスマホ実機、タブレット実機でも表示できた。もはやスライダーの機能はないので、どうにかする必要がありそうです。

 <div class="flexslider carousel">

          <ul class="slides">//コメントアウト
         
<?php
  $arg = array(
             'posts_per_page' => 3, // 表示する件数
 );
  $posts = get_posts( $arg ); if( $posts ): ?>
            
    <?php foreach ( $posts as $post ) :setup_postdata( $post ); ?>
    <?php if (has_post_thumbnail()) : ?>
     <?php the_post_thumbnail('thumbnail'); ?>
    <?php else : ?>
            <li>
            <?php $After = SCF::get('test'); echo wp_get_attachment_image( $test , 'large' );?>
                <?php echo $img_gallery_item01; ?>
                <a href="<?php the_permalink(); ?>">
                 <span><?php the_title(); ?></span>
                </a>
            </li>
    <?php endif ; ?>

<?php endforeach; ?>

          </ul>//コメントアウト
        </div>
<?php endif; wp_reset_postdata();?>