title: How to make the first post and the fifth posts have an "active" class?
body: <p>I'm using Bootstrap Carousel on WordPress, the problem is I can call the category of it, I will be only calling 4 post for the slider so it will only display 4 post, but I have a problem the first post should have the active class so the slider will recognise it as the first one, and for the rest of them doesn’t have that class. However if I post again for the fifth time it will have the active class. For every 5th post should have the active class.</p>
  
  <p>How can I make the first post and the fifth post has the active class and the rest of them doesn’t have it? Please check the item active class.</p>
  
  <pre><code>&lt;!-- Carousel --&gt;
  
          &lt;div id="carousel col-md-12" class="carousel slide" data-ride="carousel"&gt;
            &lt;ol class="carousel-indicators"&gt;
              &lt;li data-target="#carousel-example" data-slide-to="0" class="active"&gt;&lt;/li&gt;
              &lt;li data-target="#carousel-example" data-slide-to="1"&gt;&lt;/li&gt;
              &lt;li data-target="#carousel-example" data-slide-to="2"&gt;&lt;/li&gt;
            &lt;/ol&gt;
  
            &lt;div class="carousel-inner"&gt;
          &lt;?php
              $args = array(
                  'category_name' =&gt; 'carousel',
                   'post_type' =&gt; 'post',
                   'posts_per_page' =&gt; 4,
                   'paged' =&gt; ( get_query_var('paged') ? get_query_var('paged') : 1)
                   );
              query_posts($args);
              $x = 0;
              while (have_posts()) : the_post(); ?&gt;       
                  &lt;div class="item active"&gt;
                    &lt;a href="#"&gt;&lt;img src="http://localhost/wordpress/wp-content/uploads/2016/08/unnamed-file.jpeg" /&gt;&lt;/a&gt;
                    &lt;div class="carousel-caption"&gt;
                      &lt;div class="wow fadeInRight"&gt;
                      &lt;h3 style="color: #dbdbdb"&gt;Meow&lt;/h3&gt;
                      &lt;p style="color: #dbdbdb"&gt;Just Kitten Around&lt;/p&gt;
                      &lt;a href="#" class="btn btn-slider"&gt;more information..&lt;/a&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  
              &lt;?php if ($x == 2) { $x = -1; } $x++; ?&gt;
              &lt;?php endwhile; ?&gt;
            &lt;/div&gt;
  
            &lt;a class="left carousel-control" href="#carousel-example" data-slide="prev"&gt;
              &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
            &lt;/a&gt;
            &lt;a class="right carousel-control" href="#carousel-example" data-slide="next"&gt;
              &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
            &lt;/a&gt;
          &lt;/div&gt;
      &lt;!-- End of Carousel --&gt;
  </code></pre>