[英]Advance Custom Field slider is not working
I'm using advance custom field plugin to create a slide.我正在使用高级自定义字段插件来创建幻灯片。 But the output is display like this.但是输出是这样显示的。
Here is my code.这是我的代码。
front-page.php首页.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; ?>
custom.js自定义.js
$(window).on('load',function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
Is also tried of using也尝试使用
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
and it didn't worked.它没有用。
Can someone give a solution for this.有人可以为此提供解决方案。
Please add jquery.flexslider-min.js
and flexslider.css
请添加jquery.flexslider-min.js
和flexslider.css
After include above files then your slider will work properly.包含上述文件后,您的滑块将正常工作。
Also make sure you have include "jquery"
and then add slider js还要确保包含"jquery"
,然后添加滑块 js
ADD JS and CSS to Your theme and enqueue it, yourtheme will be name of your theme将 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);
}
Found a solution.找到了解决办法。 But I forgot to update.但是忘记更新了。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.