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

material-design-bootstrap-carousel.php

<?php
// I'm using both Bootstrap 4.0 and MD Bootstrap, so you may want to tweak some of this yourself
// Also remmeber to link up some styles, or the div with your background image won't display
  $args = array(
    'post_type' => 'portfolio', // my own custom post type
    'meta_query' => array( // pull in featured posts from metadata connected to a custom featured post plugin
      array(
        'key' => 'featured-checkbox',
        'value' => 'yes'
      )
    )
  );
  $the_query = new WP_Query($args);
?>

  <!--Carousel Wrapper-->
  <div id="carousel-portfolio" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
    <!--Indicators-->
    <ol class="carousel-indicators">
      <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
      <li data-target="#carousel-portfolio" 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>
    <!--/Indicators-->

    <?php rewind_posts(); ?>

    <!--Slides-->
    <div class="carousel-inner" role="listbox">
      <?php
		if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();
		$thumbnail_id   = get_post_thumbnail_id();
		$thumbnail_url  = wp_get_attachment_image_src( $thumbnail_id, 'full-size', true );
		$thumbnail_meta = get_post_meta( $thumbnail_id, '_wp_attatchment_image_alt', true );
	  ?>
        <!--Slide-->
        <!-- Set the featured image as the background image of the div -->
        <div class="carousel-item <?php if ( $the_query->current_post == 0 ) : ?>active<?php endif; ?> view hm-white-strong" style="background: url('<?php echo $thumbnail_url[0]; ?>') no-repeat center center; background-size: cover;">
          <!-- Caption -->
          <div class="full-bg-img flex-center">
            <ul class="animated fadeInUp col-md-12">
              <li>
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                  <img src="<?php site_icon_url( 'thumbnail' ); ?>" class="img-fluid mx-auto" alt="<?php get_bloginfo( array('name', 'description') ); ?>">
                </a>
              </li>
              <li style="color:black;">
                <p class="flex-item lead">
                  <?php the_excerpt(); ?>
                </p>
              </li>
              <li>
                <!-- I have this pointing to a portfolio archive, but you can point it anywhere -->
                <a target="_blank" href="<?php echo esc_url( home_url( '/portfolio/' ) ); ?>" class="btn btn-primary btn-lg flex-item" rel="nofollow">See my work</a>
              </li>
              <li>
                <a target="_blank" href="mailto:<?php get_bloginfo('admin_email'); ?>" class="btn btn-default btn-lg flex-item" rel="nofollow">Hire Me</a>
              </li>
              <li>
                <a href="<?php the_permalink(); ?>" class="text-muted">
                  <!-- A caption showing which portoflio piece is in the background -->
                  <p class="flex-item font-italic">Pictured:
                    <?php the_title(); ?>
                  </p>
                </a>
              </li>
            </ul>
          </div>
          <!-- /.Caption -->
        </div>
        <!--/.Slide-->
        <?php endwhile; endif; ?>
    </div>
    <!--/Slides-->

    <!--Controls-->
    <a class="carousel-control-prev" href="#carousel-portfolio" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel-portfolio" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
    <!--/.Controls-->
  </div>
  <!--/Carousel Wrapper-->

  <?php wp_reset_postdata(); ?>