Bootstrap Carousel Integration with WordPress Loop. Displays post thumbnail and heading.

bootstrap-carousel.php

<!-- Begin Carousel-->

			<?php
			$args = array(
				'post_type' => 'post',
				'category_name' => 'featured'
			);

			$the_query = new WP_Query ( $args );
			?>


			<div id="carouselBlog" class="carousel slide" data-ride="carousel">
				<!-- Indicators -->
				<ol class="carousel-indicators">

					<!-- the Loop -->
					<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
						<li data-target="#carouselBlog"
						    data-slide-to="<?php echo $the_query->current_post; ?>"
						    class="<?php if ( $the_query->current_post == 0 ) : ?>active<?php endif; ?>"></li>
					<?php endwhile; endif; ?>

				</ol>

				<!-- rewind loop back to zero without losing data-->
				<?php rewind_posts(); ?>

				<!-- Wrapper for slides -->
				<div class="carousel-inner">

					<?php if ( have_posts() ) : while ( $the_query->have_posts() ) :
						$the_query->the_post(); ?>

						<?php
						$thumbnail_id   = get_post_thumbnail_id();
						$thumbnail_url  = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true );
						$thumbnail_meta = get_post_meta( $thumbnail_id, '_wp_attatchment_image_alt', true );
						?>

						<div class="item <?php if ( $the_query->current_post == 0 ) : ?>active<?php endif; ?>">
							<div class="carousel-image_container">
								<div role="img" aria-label="Carousel Image"
								     class="carousel-image"
								     style="background:url(<?php echo $thumbnail_url[0]; ?>) no-repeat center center; background-size:cover;">
									<a href="<?php the_permalink(); ?>">
										<div class="carousel-caption"><p><?php the_title(); ?></p></div>
									</a>
								</div>
							</div>
						</div>

					<?php endwhile;
					endif; ?>

				</div>
				<!-- Controls -->
				<a class="left carousel-control" href="#carouselBlog" 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="#carouselBlog" role="button" data-slide="next">
					<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>

			</div>
			<!--			End Image Carousel-->