I am attempting to use Wordpress and bootstraps carousal. I have created a custom post type called images and linked it to the posts I want. I have then uploaded images to each post, When I loop through the array however it ends up outputting all of my images in the carousel. It is meant to go through each of the images in my custom field of images and echo them out in the carousel.
It's also outputting no-repeat center;">
as plain text on my html page. Which im not sure why
<?php
get_header();
?>
<?php
global $wp_query;
$postid = $wp_query->post->ID;
wp_reset_query();
$images = get_post_meta($postid, 'images', false);
?>
<div class="row">
<div class="col-md-3">
<div id="page_title">Case Studies</div>
</div>
<div class="col-md-9">
<div id="page_excerpt">
<div class="vertical_align_centre">
<?php the_excerpt();?>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="row">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php endwhile; endif; ?>
<div class="col-md-3">
<?php the_post_thumbnail('casestudy img-responsive');?>
</div>
<div class="carousel-row hidden-xs">
<div class="col-md-9">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php $i=0; foreach ($images as $image) { ?>
<div class="item <?php if ($i == 0) { echo 'active'; } ?>" style="background-size:cover; background:url('<?php echo $image; ?>') no-repeat center;">
<div class="carousel-caption">
<h4><?php echo $imageURL->post_excerpt;?></h4>
</div>
</div>
<?php $i++; } ?>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>