title: Bootstrap carousel activation with php mysql
body: <p>I can activate the bootstrap carousel.The problem is on the active class. I use $count in the while statement. With code I get active class for all courosel item. But i need to add the active class for every item when the items are slided.</p>
  
  <p>Here is the code--</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php include "connection.php"; ?&gt;
  &lt;?php
  $query = "SELECT * FROM tbl_slide ORDER BY slide_id DESC LIMIT 4";
  $slide_query = mysqli_query($conn, $query);
  // $count = mysqli_num_row($slide_query);
  $slides = '';
  $indicators = '';
  $counter = 1;
  if (!$slide_query) {
  die('Query Failed'. mysqli_query($conn));
  }
  while($row = mysqli_fetch_assoc($slide_query)){
  $slide_id = $row['slide_id'];
  $slide_image = $row['slide_image'];
  $slide_content = $row['slide_content']; 
  if($counter == 1){
  $indicators .= '&lt;li data-target="#carouselExampleIndicators" data-slide-to="'.$counter.'" class="active"&gt;&lt;/li&gt;';
  $slides .='&lt;div class="carousel-item active"&gt;
  &lt;img class="d-block img-fluid" src="images/slideImage/'.$slide_image.'"&lt;/div&gt;';
  }else{
  $indicators .= '&lt;li data-target="#carouselExampleIndicators" data-slide-to="'.$counter.'"&gt;&lt;/li&gt;';
  $slides .='&lt;div class="carousel-item active"&gt;
  &lt;img class="d-block img-fluid" src="images/slideImage/'.$slide_image.'"&lt;/div&gt;';
  
  }
  $counter ++;}?&gt;
  &lt;div id="carouselExampleIndicators" class="carousel slide my-4" data-ride="carousel"&gt;
  &lt;ol class="carousel-indicators"&gt;
  &lt;?php echo $indicators; ?&gt;
  &lt;/ol&gt;
  &lt;div class="carousel-inner" role="listbox"&gt;
  &lt;?php echo $slides;?&gt;
  &lt;/div&gt;
  &lt;a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"&gt;
  &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
  &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
  &lt;/a&gt;
  &lt;a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"&gt;
  &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
  &lt;span class="sr-only"&gt;Next&lt;/span&gt;
  &lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>