title: Integrating Bootstrap carousel in WordPress without plugin
body: <p>I have integarted bootstrap carousel into my wordpress. The slides will be taken from the posts which will be tagged as "featured" so only 5 recently enter "featured" posts will be shown.</p>
  
  <p>Below is my code:</p>
  
  <pre><code>&lt;div id="carousel-captions" class="carousel slide bs-docs-carousel hidden-xs"&gt;
          &lt;ol class="carousel-indicators"&gt;
            &lt;li data-target="#carousel-captions" data-slide-to="0" class="active"&gt;&lt;/li&gt;
            &lt;li data-target="#carousel-captions" data-slide-to="1" class=""&gt;&lt;/li&gt;
            &lt;li data-target="#carousel-captions" data-slide-to="2" class=""&gt;&lt;/li&gt;
            &lt;li data-target="#carousel-captions" data-slide-to="3" class=""&gt;&lt;/li&gt;
            &lt;li data-target="#carousel-captions" data-slide-to="4" class=""&gt;&lt;/li&gt;
          &lt;/ol&gt;
          &lt;div class="carousel-inner"&gt;
  
  &lt;?php $the_query = new WP_Query( 'tag=featured&amp;orderby=date&amp;posts_per_page=5' ); ?&gt;
  
  &lt;?php if ( $the_query-&gt;have_posts() ) : ?&gt;
  
    &lt;?php while ( $the_query-&gt;have_posts() ) : $the_query-&gt;the_post(); ?&gt;
      &lt;div class="item"&gt;
            &lt;a href="&lt;?php the_permalink() ?&gt;"&gt;
              &lt;img src="&lt;?php the_field('header_banner', $post_id); ?&gt;" alt=""&gt;
              &lt;div class="carousel-caption"&gt;
                &lt;h3&gt;&lt;?php the_field('year', $post_id); ?&gt;&lt;/h3&gt;&lt;span class="name"&gt;Make&lt;br&gt;&lt;?php $category = get_the_category(); echo $category[0]-&gt;cat_name; ?&gt;&lt;/span&gt;&lt;hr&gt;
                &lt;p&gt;&lt;?php the_field('mileage', $post_id); ?&gt; Miles | &lt;?php the_field('exterior_color', $post_id); ?&gt; Color&lt;br&gt;&lt;br&gt;&lt;?php echo homepage_carousel_excerpt(15); ?&gt;&lt;/p&gt;&lt;span class="btn btn-default"&gt;Details&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;rarr;&lt;/span&gt;
              &lt;/div&gt;&lt;/a&gt;
            &lt;/div&gt;
    &lt;?php endwhile; ?&gt;
    &lt;?php wp_reset_postdata(); ?&gt;
  
  &lt;?php else:  ?&gt;
    &lt;p&gt;&lt;?php _e( 'Sorry, no posts matched your criteria.' ); ?&gt;&lt;/p&gt;
  &lt;?php endif; ?&gt;
  
  
          &lt;/div&gt;
          &lt;a class="left carousel-control" href="#carousel-captions" data-slide="prev"&gt;
            &lt;span class="icon-prev"&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;a class="right carousel-control" href="#carousel-captions" data-slide="next"&gt;
            &lt;span class="icon-next"&gt;&lt;/span&gt;
          &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is It doesn't slide because the "active" class is not working statically.</p>
  
  <p>HOw do I fix this?</p>
  
  <p>Thanks</p>