title: Bootstrap Carousel to display text
body: <p>I want to display long notes on bootstrap carousel. the notes will be fetched from mySql database. Since the notes are long, i need to split them using number of words then display them in the carousel slides. the problems is that am not able to display the splitted text in different slides. the following is what i have done:</p>
  
  <pre><code>&lt;div class="col-md-6 "&gt;
      &lt;div class="panel panel-primary"&gt;
          &lt;div class="panel-heading"&gt;Lecture&lt;/div&gt;
  
          &lt;!-- Slider News by Carousel --&gt;
          &lt;div id='myCarousel' class='carousel slide' data-ride='carousel'&gt;
              &lt;ol class='carousel-indicators'&gt;
                  &lt;?php
                  include "config/koneksi.php";
                  $query = "select notes from notes where Note_ID = 34";
                  $res = mysqli_query($con, $query);
                  while ($row = mysqli_fetch_array($res)) {
                      $w = $row['notes'];
                      $arr2 = str_split($w, 500);
                  }
  
                  //var_dump($arr2);
                  $max = sizeof($arr2);
  
                  $slides = '';
                  $Indicators = '';
                  $counter = 0;
  
                  ?&gt;
              &lt;/ol&gt;
              &lt;div class='carousel-inner'&gt;
                  &lt;?php
  
                  for ($x = 0; $x &lt;= $max; $x++) {
  
                      if ($x == 0) {
                          echo "&lt;div class='item active'&gt;";
                          echo $arr2[$x]++;
                          echo "&lt;/div&gt;";
  
                      } else { 
  
                          echo "&lt;div class='item'&gt;";
  
                          if (!isset($arr2[$x])) {
                              $arr2[$x] = 0;
                          }
                          echo $arr2[$x]++;
                          echo "&lt;/div&gt;";
                      }
                  }
  
                  echo "&lt;/div&gt;";
                  echo "&lt;a class='left carousel-control' href='#myCarousel' data-slide='prev'&gt;‹&lt;/a&gt;";
                  echo "&lt;a class='right carousel-control' href='#myCarousel' data-slide='next'&gt;&amp;rsaquo;&lt;/a&gt;";
  
                  echo "&lt;/div&gt;";
  
                  echo "&lt;!-- End Slider Caraousel--&gt;";
                  ?&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the result:
  <a href="https://i.stack.imgur.com/DeGH9.png" rel="nofollow noreferrer">the result</a></p>