So I have been trying to add the carousel as a shortcode but whenever I try it will end up crashing or not displaying this is being done in functions php and it appends to the body as of now please see the code below
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');
add_action('wp_head'
- this will cause the output to land in thehead
element - clearly your carousel's HTML code does not belong in there.