Cacher is the code snippet organizer for pro developers

<!--   
1) CREATE A CUSTOM POST TYPE 'gallery'
2) add only featured image, title and optional custom fields
3) modify id=carousel-target and give it a width of 100% if slider banner is full page width
4) use the query below

-->


<!-- CAROUSEL -->
    <?php // QUERY Custom post type 'gallery'
        $args = array ( 'post_type' => 'gallery');
        $galleryquery = new WP_Query ($args);
     ?>

        <div id="carousel-target" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <?php if ( have_posts() ) : while ( $galleryquery->have_posts() ) : $galleryquery->the_post(); ?>
            
            <li data-target="#carousel-target" data-slide-to="<?php echo $galleryquery->current_post; ?>" class="<?php if( $galleryquery->current_post == 0 ):?>active<?php endif; ?>"></li>
            
            <?php endwhile; endif; ?>
          </ol>

          <?php rewind_posts(); ?>

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

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

            <div class="item <?php if( $galleryquery->current_post == 0 ):?>active<?php endif; ?>">

              <?php  // get the id, img src and meta 
                $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_attachment_image_alt', true);                
              ?>
              <!-- use img source and meta info   -->
              <a href="<?php the_permalink(); ?>"><img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php echo $thumbnail_meta; ?>"></a>
              <div class="carousel-caption"><?php the_title(); ?></div>
            </div>
            
            <?php endwhile; endif; ?>

          </div>

          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-target" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#carousel-target" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div>
<!-- END CAROUSEL  SECTION-->