Bootstrap Carousel pulling from ACF Data
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="8000" id="bs-home-carousel">
<!-- Overlay -->
<div class="overlay"></div>
<!--<ol class="carousel-indicators">
<?php
$i=0;
while( have_rows('home_carousel') ): the_row();
if ($i == 0) {
echo '<li data-target="#bs-home-carousel" data-slide-to="0" class="active"></li>';
} else {
echo '<li data-target="#bs-home-carousel" data-slide-to="'.$i.'"></li>';
}
$i++;
endwhile; ?>
</ol>-->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php
$z = 0;
while( have_rows('home_carousel') ): the_row();
$image = wp_get_attachment_image_src(get_sub_field('image'), 'full'); ?>
<div class="item slides <?php if ($z==0) { echo 'active';} ?>">
<img src="<?php the_sub_field('image'); ?>" style="" />
<div class="home-carousel-caption">
<hgroup>
<h2 class="line-one" style="background: <?php the_sub_field('color-picker'); ?>"><?php the_sub_field('line-one');?></h2><br />
<h2 class="line-two" style="background: <?php the_sub_field('color-picker'); ?>"><?php the_sub_field('line-two');?></h2>
</hgroup>
</div>
</div>
<?php
$z++;
endwhile; ?>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#bs-home-carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#bs-home-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>