我應該如何將輪播指示符點更改爲縮略圖圖像？

Question

<ol class="carousel-indicators"> 
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
<li data-target="#carousel-example-generic" data-slide-to="1"></li> 
<li data-target="#carousel-example-generic" data-slide-to="2"></li> 
<li data-target="#carousel-example-generic" data-slide-to="3"></li>  
<li data-target="#carousel-example-generic" data-slide-to="3"></li>  
</ol>    

這是我目前的旋轉木馬點形式在我的旋轉木馬幻燈片下方，我發現很難將其更改爲我的幻燈片放映圖像的縮略圖版本。我可以知道我應該在我的正文頁面或bootstrap.js中更改哪些內容？

Answer 1

而是改變現有carousel-indicators的，你可以使用jQuery更新縮略圖行時傳送帶幻燈片..

演示：http://bootply.com/79859

<div class="container"> 

    <!-- thumb navigation carousel --> 
    <div class="col-md-12 hidden-sm hidden-xs" id="slider-thumbs"> 

     <!-- thumb navigation carousel items --> 
     <ul class="list-inline"> 
      <li> 
       <a id="carousel-selector-0" class="selected"> 
        <img src="http://placehold.it/80x60&amp;text=one" class="img-responsive"> 
       </a> 
      </li> 
      <li> 
       <a id="carousel-selector-1"> 
        <img src="http://placehold.it/80x60&amp;text=two" class="img-responsive"> 
       </a> 
      </li> 
      <li> 
       <a id="carousel-selector-2"> 
        <img src="http://placehold.it/80x60&amp;text=three" class="img-responsive"> 
       </a> 
      </li> 
      <li> 
       <a id="carousel-selector-3"> 
        <img src="http://placehold.it/80x60&amp;text=four" class="img-responsive"> 
       </a> 
      </li> 
      <li> 
       <a id="carousel-selector-4"> 
        <img src="http://placehold.it/80x60&amp;text=five" class="img-responsive"> 
       </a> 
      </li> 
      <li> 
       <a id="carousel-selector-5"> 
        <img src="http://placehold.it/80x60&amp;text=six" class="img-responsive"> 
       </a> 
      </li> 
      ... more thumbnails 
     </ul> 

    </div> 


    <!-- main slider carousel --> 
    <div class="row"> 
     <div class="col-md-12" id="slider"> 

      <div class="col-md-12" id="carousel-bounding-box"> 
       <div id="myCarousel" class="carousel slide"> 
        <!-- main slider carousel items --> 
        <div class="carousel-inner"> 
         <div class="active item" data-slide-number="0"> 
          <img src="http://placehold.it/1200x480&amp;text=one" class="img-responsive"> 
         </div> 
         <div class="item" data-slide-number="1"> 
          <img src="http://placehold.it/1200x480/888/FFF" class="img-responsive"> 
         </div> 
         <div class="item" data-slide-number="2"> 
          <img src="http://placehold.it/1200x480&amp;text=three" class="img-responsive"> 
         </div> 
         <div class="item" data-slide-number="3"> 
          <img src="http://placehold.it/1200x480&amp;text=four" class="img-responsive"> 
         </div> 
         <div class="item" data-slide-number="4"> 
          <img src="http://placehold.it/1200x480&amp;text=five" class="img-responsive"> 
         </div> 
         ... more items 
        </div> 
        <!-- main slider carousel nav controls --><a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> 

        <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> 
       </div> 
      </div> 

     </div> 
    </div> 
    <!--/main slider carousel--> 
</div> 

的JS可以使用數據 - 簡化幻燈片屬性，而不是jQuery點擊事件： http://www.bootply.com/JiuFTQf9rI