title: How to add next previous button for thumbnail in this Bootstrap Product Slider?
body: <p>I want to have next and previous button for thumbnail part such that it could display more items in this Bootstrap Product slider showing only few thumbnails and navigate to every item using next and previous.</p>
  
  <p><a href="http://codepen.io/RetinaInc/details/FGjbH" rel="nofollow">http://codepen.io/RetinaInc/details/FGjbH</a></p>
  
  <p>This is how i tried but not worked as i wanted</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-sm-6"&gt;
         &lt;h1&gt;Products&lt;/h1&gt;  
          &lt;div id="carousel" class="carousel slide" data-ride="carousel"&gt;
              &lt;div class="carousel-inner"&gt;
                  &lt;div class="item active"&gt;
                      &lt;img class ="img-responsive" src="img/doubleRound/all-parts.JPG"&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;img class ="img-responsive" src="img/doubleRound/front_side.JPG"&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;img class ="img-responsive" src="img/doubleRound/front.JPG"&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;img  class ="img-responsive"src="img/doubleRound/top.JPG"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt; 
      &lt;/div&gt; &lt;!-- /col-sm-6 --&gt;
      &lt;div class="col-sm-6"&gt;
  
  
          &lt;div class="clearfix"&gt;
                &lt;div class="carousel-link"&gt;
                &lt;a class="left carousel-control" href="#carousel" data-slide="prev"&gt;&lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;div data-target="#carousel" data-slide-to="0" class="thumb"&gt;&lt;img class ="img-responsive" src="img/doubleRound/all-parts.JPG"&gt;&lt;/div&gt;
                  &lt;div data-target="#carousel" data-slide-to="1" class="thumb"&gt;&lt;img class ="img-responsive" src="img/doubleRound/front_side.JPG"&gt;&lt;/div&gt;
                  &lt;div data-target="#carousel" data-slide-to="2" class="thumb"&gt;&lt;img class ="img-responsive" src="img/doubleRound/front.JPG"&gt;&lt;/div&gt;
                  &lt;div data-target="#carousel" data-slide-to="3" class="thumb"&gt;&lt;img class ="img-responsive" src="img/doubleRound/top.JPG"&gt;&lt;/div&gt;
  
        &lt;a class="right carousel-control" href="#carousel" data-slide="next"&gt;&lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;&lt;/a&gt;
  
                &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>