title: Bootstrap carousel dynamic php
body: <p>My carousel has thumbnails on the top of my modal.
  My carousel only works the <strong>carousel nav controls</strong>
  cuz im using in my <em>href</em>="#myCarousel <strong>'.$rows['id'].'</strong>"
  in the main slider im using my <em>id</em>="myCarousel <strong>'.$rows['id'].'</strong>"
  So the slider is working fine,but the problem is when i click on the
  thumbnails my slider doesn't change.
  I already tried to use <strong>'.$rows['id'].'</strong> after my id="carousel-selector-1"
  like this id="carousel-selector-1 '<strong>.$rows['id'].'</strong>" and in my data-slide-number="<em>Number here</em> <strong>'.$rows['id'].'</strong>"
  and it didnt work.</p>
  
  <p>in my java script i tried to make changes and no succsses.</p>
  
  <pre><code>   $('#myCarousel').carousel({
    interval: 4000
     });
  
    // handles the carousel thumbnails
    $('"[id^='.$rows['id'].']").click( function(){
    var id_selector = $(this).attr("id");
   var id = id_selector.substr(id_selector.length -1);
   id = parseInt(id);
   $('#myCarousel').carousel(id);
   $('[id^=carousel-selector-]').removeClass('selected');
   $(this).addClass('selected');
   });
  
  // when the carousel slides, auto update
  $('#myCarousel').on('slid', function (e) {
  var id = $('.item.active').data('slide-number');
  id = parseInt(id);
  $('[id^=carousel-selector-]').removeClass('selected');
  $('[id=carousel-selector-'+id+']').addClass('selected');
  });
  </code></pre>
  
  <p>my carousel...</p>
  
  <pre><code>&lt;div class="container"&gt;
   &lt;!-- thumb navigation carousel --&gt;
  &lt;div class="col-md-12 hidden-sm hidden-xs" id="slider-thumbs'.$rows['id'].'"&gt;
  
          &lt;!-- thumb navigation carousel items --&gt;
        &lt;ul class="list-inline"&gt;
        &lt;li&gt; &lt;a id="carousel-selector-0" class="selected"&gt;
          &lt;img src="http://placehold.it/80x60&amp;amp;text=one" class="img-responsive"&gt;
        &lt;/a&gt;&lt;/li&gt;
        &lt;li&gt; &lt;a id="carousel-selector-1"&gt;
          &lt;img src="http://placehold.it/80x60&amp;amp;text=two" class="img-responsive"&gt;
        &lt;/a&gt;&lt;/li&gt;
        &lt;li&gt; &lt;a id="carousel-selector-2"&gt;
          &lt;img src="http://placehold.it/80x60&amp;amp;text=three" class="img-responsive"&gt;
        &lt;/a&gt;&lt;/li&gt;
        &lt;li&gt; &lt;a id="carousel-selector-3"&gt;
          &lt;img src="http://placehold.it/80x60&amp;amp;text=four" class="img-responsive"&gt;
        &lt;/a&gt;&lt;/li&gt;
              &lt;li&gt; &lt;a id="carousel-selector-4"&gt;
          &lt;img src="http://placehold.it/80x60&amp;amp;text=five" class="img-responsive"&gt;
        &lt;/a&gt;&lt;/li&gt;
        &lt;li&gt; &lt;a id="carousel-selector-5"&gt;
          &lt;img src="http://placehold.it/80x60&amp;amp;text=six" class="img-responsive"&gt;
        &lt;/a&gt;&lt;/li&gt;
        &lt;li&gt; &lt;a id="carousel-selector-6"&gt;
          &lt;img src="http://placehold.it/80x60&amp;amp;text=seven" class="img-responsive"&gt;
        &lt;/a&gt;&lt;/li&gt;
        &lt;li&gt; &lt;a id="carousel-selector-7"&gt;
          &lt;img src="http://placehold.it/80x60&amp;amp;text=eight" class="img-responsive"&gt;
        &lt;/a&gt;&lt;/li&gt;
         &lt;li&gt; &lt;a id="carousel-selector-7"&gt;
          &lt;img src="http://placehold.it/80x60&amp;amp;text=eight" class="img-responsive"&gt;
        &lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
  &lt;/div&gt;
  
  
  &lt;!-- main slider carousel --&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-12" id="slider"&gt;
  
              &lt;div class="col-md-12" id="carousel-bounding-box"&gt;
                  &lt;div id="myCarousel'.$rows['id'].'" class="carousel slide"&gt;
                      &lt;!-- main slider carousel items --&gt;
                      &lt;div class="carousel-inner"&gt;
                          &lt;div class="active item" data-slide-number="0"&gt;
                              &lt;img src="http://placehold.it/1200x480&amp;amp;text=one" class="img-responsive"&gt;
                          &lt;/div&gt;
                          &lt;div class="item" data-slide-number="1"&gt;
                            &lt;img src="http://placehold.it/1200x480/888/FFF" class="img-responsive"&gt;
                          &lt;/div&gt;
                          &lt;div class="item" data-slide-number="2"&gt;
                              &lt;img src="http://placehold.it/1200x480&amp;amp;text=three" class="img-responsive"&gt;
                          &lt;/div&gt;
                          &lt;div class="item" data-slide-number="3"&gt;
                              &lt;img src="http://placehold.it/1200x480&amp;amp;text=four" class="img-responsive"&gt;
                          &lt;/div&gt;
                          &lt;div class="item" data-slide-number="4"&gt;
                              &lt;img src="http://placehold.it/1200x480&amp;amp;text=five" class="img-responsive"&gt;
                          &lt;/div&gt;
                          &lt;div class="item" data-slide-number="5"&gt;
                              &lt;img src="http://placehold.it/1200x480&amp;amp;text=six" class="img-responsive"&gt;
                          &lt;/div&gt;
                          &lt;div class="item" data-slide-number="6"&gt;
                              &lt;img src="http://placehold.it/1200x480&amp;amp;text=seven" class="img-responsive"&gt;
                          &lt;/div&gt;
                          &lt;div class="item" data-slide-number="7"&gt;
                              &lt;img src="http://placehold.it/1200x480&amp;amp;text=eight" class="img-responsive"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;!-- main slider carousel nav controls --&gt; &lt;a class="carousel-control left" href="#myCarousel'.$rows['id'].'" data-slide="prev"&gt;‹&lt;/a&gt;
  
                      &lt;a class="carousel-control right" href="#myCarousel'.$rows['id'].'" data-slide="next"&gt;›&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>what is worng?</p>