高級自定義字段滑塊不起作用

Question

我正在使用高級自定義字段插件來創建幻燈片。 但是輸出是這樣顯示的。

現在滑塊預覽：

這是我的代碼。

首頁.php

<?php if( have_rows('slides') ): ?>
<div class="flexslider">
    <ul class="slides">
        <?php while( have_rows('slides') ): the_row(); 
            $image = get_sub_field('image');
            $imageurl = $image['sizes']['slider'];
        ?>            
        <li><img src="<?php echo $imageurl; ?>"></li>            
        <?php endwhile; ?>
    </ul>
</div>
<?php endif; ?>

自定義.js

$(window).on('load',function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
});

也嘗試使用

$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
});

它沒有用。

有人可以為此提供解決方案。

Answer 1

請添加jquery.flexslider-min.js和flexslider.css

包含上述文件后，您的滑塊將正常工作。

還要確保包含"jquery" ，然后添加滑塊 js

這里的例子： codepen

Answer 2

將 JS 和 CSS 添加到您的主題並將其加入隊列，您的主題將成為您的主題名稱

if (!is_admin()) {
    // jQuery (optional loading via Google CDN)
    wp_deregister_script('jquery');
    wp_register_script('jquery', ('http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js'), false);  
    wp_enqueue_script('jquery');
    // Flexslider JS
    wp_enqueue_script('flexslider', '/wp-content/themes/yourtheme/js/jquery.flexslider-min.js', null, 2, false);   
    // Flexslider CSS
    wp_enqueue_style( 'flexslider', '/wp-content/themes/yourtheme/css/flexslider.css', null, null, null);
}

Answer 3

找到了解決辦法。 但是忘記更新了。

<div class="wrap">
            <div class="cont">
            <?php if( get_field('slider_1') ): ?>
            <div class="slide" style="background-image:url('<?php the_field('slider_1'); ?>');"></div>
              <?php endif; ?>
            <?php if( get_field('slider_2') ): ?>
             <div class="slide"style="background-image:url('<?php the_field('slider_2'); ?>');"></div>
            <?php endif; ?>
            <?php if( get_field('slider_3') ): ?>
             <div class="slide"style="background-image:url('<?php the_field('slider_3'); ?>');"></div>
            <?php endif; ?>
            <?php if( get_field('slider_4') ): ?>
             <div class="slide"style="background-image:url('<?php the_field('slider_4'); ?>');"></div>
            <?php endif; ?>
            </div>
                <div id="nav" style="font-size:16px;" class="pull-right">
                </div>
      </div>