ACFリピーターとフレックススライダが動作しない

何らかの理由で、私の画像が表示されず、わからないようです。 $（...）のページを調べると、このエラーが出ます。onloadは関数ではありません。スライダーとすべてのコードが何か間違っていることが分かります。おかげACFリピーターとフレックススライダが動作しない

<head> 
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/flexslider.css"> 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.flexslider-min.js"></script> 
    <script type="text/javascript" charset="utf-8"> 
    $(window).onload(function() { 
     $('.flexslider').flexslider({ 
     animation: "slide" 
     }); 
    }); 

    </script> 
</head> 

<div class="conatainer-fluid"> 
    <div class="row"> 
    <div class="col-md-12"> 
     <?php if(get_field('slider')): ?> 
     <div class="flexslider"> 
      <ul class="slides"> 
      <?php while(has_sub_field('slider')): ?> 
       <li><img class="img-responsive" src="<?php the_sub_field('image'); ?>" alt="Welcome to StairWorld" /></li> 
       <?php endwhile; ?> 
      </ul> 
     </div> 
     <?php endif; ?> 
    </div> 
    </div> 
</div>

出典

2017-05-05 Reece

んflexsliderに.onload jquery 3で作業する - かなり古いので、jquery – Pete

の以前のバージョンでしか動作しないかもしれないwoocommerceサイトによれば、最新のjQuery – Reece

ループと互換性がありますか？下の私の答えを見てください。 – meck373

-1

は、私はあなたがこれをどのように構築する優れたチュートリアルですhttps://www.advancedcustomfields.com/resources/gallery/

でご覧になることをお勧めします。

<?php 

$images = get_field('gallery'); 

if($images): ?> 
    <div id="slider" class="flexslider"> 
     <ul class="slides"> 
     <?php foreach($images as $image): ?> 
      <li> 
       <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /> 
       <p><?php echo $image['caption']; ?></p> 
      </li> 
     <?php endforeach; ?> 
    </ul> 
</div> 
<div id="carousel" class="flexslider"> 
    <ul class="slides"> 
     <?php foreach($images as $image): ?> 
      <li> 
       <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" /> 
      </li> 
     <?php endforeach; ?> 
    </ul> 
</div>

flexsliderファイルをダウンロードして接続することを忘れないでください。 https://woocommerce.com/flexslider/

<!-- Place somewhere in the <head> of your document --> 
<link rel="stylesheet" href="flexslider.css" type="text/css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script src="jquery.flexslider.js"></script>

また、ヘッダにこれを含める：

<!-- Place in the <head>, after the three links --> 
<script type="text/javascript" charset="utf-8"> 
    $(window).load(function() { 
    $('.flexslider').flexslider(); 
    }); 
</script>

出典

2017-05-05 08:57:21 meck373

@pete私は答えを更新し、リンクからコードをコピーしました！ – meck373

私は$（ウィンドウ）を変更しなければならなかったことを考え出し$（ドキュメント）.ready

出典

2017-05-05 09:23:55 Reece

それは実際には何の違いもないはずです - 私は多くのフレックスライダーを使って、ウィンドウロード機能でそれらを開始しましたが、それがあなたのために働くならば、それは変です – Pete

ACFリピーターとフレックススライダが動作しない

答えて

関連する問題