我想创建一个短代码，显示我创建的旋转木马

Question

所以我一直在尝试将carousel添加为短代码但每当我尝试时，它最终会崩溃或不显示这是在php函数中完成的，它附加到正文到现在请参阅下面的代码

function flexslider_js() {

$images = get_field('gallery');
if( $images ): ?>
<div id="carousel" class="flexslider">
<ul class="slides">
<?php foreach( $images as $image ): ?>
<li>
<img src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" alt="Thumbnail of <?php echo esc_url($image['alt']); ?>" />
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; 
?>
<script>
// Can also be used with $(document).ready()
$(window).load(function () {
$(".flexslider").flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5
});
});
</script>                      
<?php
}
add_action('wp_head', 'flexslider_js');

Answer 1

谢谢你的帮助，我已经找到了答案，这可能不是最有效的方法，如果有任何建议的更好的方法，请务必说

function flexslider_js() {
?>
<script>
// Can also be used with $(document).ready()
$(window).load(function () {
$(".flexslider").flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 20
});
});
</script>


<?php
$images = get_field('gallery');
$html = '';
foreach( $images as $image ) {
$slides .= '<li><div class="slide-contents"><a href="' . $image['sizes']['medium'] . '" data-lightbox="carousel"><img src="' . $image['sizes']['thumbnail'] . '" class="slide-image"/></a></div></li>';
}
$html .= '<div id="carousel" class="flexslider"><ul class="slides">' . $slides . '</ul></div>';
console.log($html);
return $html;
}
add_shortcode( 'carousel', 'flexslider_js' );