Bootstrap carousel dynamic php
<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>