jcadima
5/25/2015 - 11:08 PM

Bootstrap WP Slider Carousel

Bootstrap WP Slider Carousel

<?php


// CAROUSEL START
    <?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
                $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);                
              ?>
              <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-->