高级自定义字段滑块不起作用

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"&nbsp;然后添加滑块 js这里的例子：codepen

Answer 2

找到了解决方案。但是我忘记更新了。<div class="wrap">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="cont">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php if( get_field('slider_1') ): ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="slide" style="background-image:url('<?php the_field('slider_1'); ?>');"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php endif; ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php if( get_field('slider_2') ): ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="slide"style="background-image:url('<?php the_field('slider_2'); ?>');"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php endif; ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php if( get_field('slider_3') ): ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="slide"style="background-image:url('<?php the_field('slider_3'); ?>');"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php endif; ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php if( get_field('slider_4') ): ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="slide"style="background-image:url('<?php the_field('slider_4'); ?>');"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php endif; ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="nav" style="font-size:16px;" class="pull-right">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>

Answer 3

将 JS 和 CSS 添加到您的主题并将其加入队列，您的主题将是您的主题的名称if (!is_admin()) {&nbsp; &nbsp; // jQuery (optional loading via Google CDN)&nbsp; &nbsp; wp_deregister_script('jquery');&nbsp; &nbsp; wp_register_script('jquery', ('http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js'), false);&nbsp;&nbsp;&nbsp; &nbsp; wp_enqueue_script('jquery');&nbsp; &nbsp; // Flexslider JS&nbsp; &nbsp; wp_enqueue_script('flexslider', '/wp-content/themes/yourtheme/js/jquery.flexslider-min.js', null, 2, false);&nbsp; &nbsp;&nbsp; &nbsp; // Flexslider CSS&nbsp; &nbsp; wp_enqueue_style( 'flexslider', '/wp-content/themes/yourtheme/css/flexslider.css', null, null, null);}