ACF直放站和Flexslider不工作

由於某種原因，我的圖像沒有顯示，我似乎無法弄清楚。我在檢查頁面時也遇到這個錯誤，$（...）。onload不是函數。下面的代碼可以讓你注意到一些錯誤。由於ACF直放站和Flexslider不工作

<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使用jQuery 3 - 這是相當古老，所以可能只適用於早期版本的jQuery – Pete

根據woocommerce網站它是兼容最新的jQuery – Reece

while循環？請參閱下面的答案。 – 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

我想通了，我不得不改變$（窗口）.onload爲$（文件）。就緒

來源

2017-05-05 09:23:55 Reece

這應該不會有什麼區別 - 我已經使用了許多flexsliders並在窗口加載函數中啓動它們，但是如果它適合您，那麼這很奇怪 – Pete

ACF直放站和Flexslider不工作

回答

相關問題