title: Load images into a Bootstrap carousel from Database MySql
body: <p>I have a working Bootstrap carousel with images source insert into HTML code. I need to load images (and some others data like title and description) from Mysql database using PHP code. I tried PHP code alone and it works, but when I tried to implement it into original HTML code, it not works.</p>
  
  <p>This is Carousel HTML code:</p>
  
  <pre><code>    &lt;div id="myCarousel" class="carousel slide carousel-fade"&gt;
  
  
      &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#myCarousel" data-slide-to="0" class="" contenteditable="false"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="1" class="active" contenteditable="false"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="2" class="" contenteditable="false"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="3" class="" contenteditable="false"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="4" class="" contenteditable="false"&gt;&lt;/li&gt;
  
      &lt;/ol&gt;
  
  
  
      &lt;div class="carousel-inner"&gt;
  
  
          &lt;div class="item" style=""&gt;
              &lt;img src="images/slide/slide-1.jpg" alt="" class=""&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h4 class=""&gt;First Slide Title&lt;/h4&gt;
                  &lt;p class=""&gt;
                     Description for First Slide, this First Slide.
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div class="item active"&gt;
              &lt;img src="images/slide/slide-2.jpg" alt="" class=""&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h4 class=""&gt;Second Slide Title&lt;/h4&gt;
  
                  &lt;p class=""&gt;
                     Description for Second Slide, this is Second Slide.
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div class="item" style=""&gt;
              &lt;img src="images/slide/slide-3.jpg" alt="" class=""&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h4 class=""&gt;Third Slide Title&lt;/h4&gt;
  
                              &lt;p class=""&gt;
                     Description for Third Slide, this is Third Slide.
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
           &lt;div class="item" style=""&gt;
              &lt;img src="images/slide/slide-4.jpg" alt="" class=""&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h4 class=""&gt;Third Slide Title&lt;/h4&gt;
  
                              &lt;p class=""&gt;
                     Description for Third Slide, this is Third Slide.
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
           &lt;div class="item" style=""&gt;
              &lt;img src="images/slide/slide-5.jpg" alt="" class=""&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h4 class=""&gt;Third Slide Title&lt;/h4&gt;
  
                              &lt;p class=""&gt;
                     Description for Third Slide, this is Third Slide.
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
      &lt;/div&gt; 
  
  
      &lt;a class="left carousel-control" href="#myCarousel" 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="#myCarousel" data-slide="next"&gt;
          &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
      &lt;/a&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my PHP code (alone):</p>
  
  <pre><code>    &lt;?php
  
  
  $servername = "xxxxxxxxxxx";
  $username = "xxxxxxxxxxxxx";
  $password = "xxxxxxxxxxxxxx";
  $dbname = "xxxxxxxxxxx";
  
  // Create connection
  $conn = mysqli_connect($servername, $username, $password, $dbname);
  // Check connection
  if (!$conn) {
      die("Connection failed: " . mysqli_connect_error());
  }
  
  $sql = "SELECT id AS id, title AS title, imagename AS imagename, description AS description, status AS status FROM uploadslide ORDER BY id";
  
   $result = mysqli_query($conn, $sql);
  
   while($row = mysqli_fetch_assoc($result)){
  
  
  
  ?&gt;
  
          &lt;div class="item" style=""&gt;
              &lt;div class="carousel-caption"&gt;
              &lt;?php echo '&lt;img src="uploads/slide/' .$row['imagename']. '" alt="" class="" /&gt; '?&gt;
                  &lt;h4 class=""&gt;&lt;?php echo $row['title'] ?&gt;&lt;/h4&gt;
                  &lt;p class=""&gt;
                     &lt;?php echo $row['description'] ?&gt;
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;?php 
  
  }
      mysqli_close($conn);
  
  ?&gt;
  </code></pre>
  
  <p>And this is my HTML + PHP code (Together):</p>
  
  <pre><code>    &lt;div id="myCarousel" class="carousel slide carousel-fade"&gt;
  
  
      &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#myCarousel" data-slide-to="0" class="" contenteditable="false"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="1" class="active" contenteditable="false"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="2" class="" contenteditable="false"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="3" class="" contenteditable="false"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="4" class="" contenteditable="false"&gt;&lt;/li&gt;
  
      &lt;/ol&gt;
  
  
  
      &lt;div class="carousel-inner"&gt;
  
  
         &lt;?php
  
  
  $servername = "xxxxxxxxxxxx";
  $username = "xxxxxxxxxxx";
  $password = "xxxxxxxxxxxx";
  $dbname = "xxxxxxxxxxx";
  
  // Create connection
  $conn = mysqli_connect($servername, $username, $password, $dbname);
  // Check connection
  if (!$conn) {
      die("Connection failed: " . mysqli_connect_error());
  }
  
  $sql = "SELECT id AS id, title AS title, imagename AS imagename, description AS description, status AS status FROM uploadslide ORDER BY id";
  
   $result = mysqli_query($conn, $sql);
  
   while($row = mysqli_fetch_assoc($result)){
  
  
  
  ?&gt;
  
          &lt;div class="item" style=""&gt;
              &lt;div class="carousel-caption"&gt;
              &lt;?php echo '&lt;img src="uploads/slide/' .$row['imagename']. '" alt="" class="" /&gt; '?&gt;
                  &lt;h4 class=""&gt;&lt;?php echo $row['title'] ?&gt;&lt;/h4&gt;
                  &lt;p class=""&gt;
                     &lt;?php echo $row['description'] ?&gt;
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;?php 
  
  }
      mysqli_close($conn);
  
  ?&gt;
  
  
      &lt;/div&gt; 
  
      &lt;a class="left carousel-control" href="#myCarousel" 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="#myCarousel" data-slide="next"&gt;
          &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
      &lt;/a&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I get my page without carousel. I am getting crazy about it.</p>