尋找BootStrap 3.0旋轉木馬照片庫

-3

任何人都知道BS 3.0插件創建一個簡單或最小的縮略圖驅動的幻燈片，不使用燈箱？響應也是理想的。尋找BootStrap 3.0旋轉木馬照片庫

我不是想重新發明輪子，但還沒有發現任何東西，而且有點急。

看到這個，Carousel with Thumbnails in Bootstrap 3.0

我不喜歡它是有多麼的冗餘重複同樣的幻燈片縮略圖假貨。

我不反對編碼自己，我只是希望能節省一些時間，並利用插件，如果有人已經生產了一個。

下面是我在想什麼圖片。大小不相關。

ignore pic sizes but this is what i'm looking to achieve

如果沒有人有什麼我就分享一下我最終的編碼後，我做的時候呢。

謝謝！

來源

2015-02-10 Ryan Hollingsworth

Flexslider和油滑雙方都同步的選項來實現這一目標。 – Christina 2015-02-10 20:45:33

謝謝我會研究這些。祝願任何人-1這將評論爲什麼。在用盡Google之後，我覺得自己覺得這是合法的一步，也許我誤解了這個網站的觀點？ – 2015-02-10 21:05:16

我通常從來沒有反對票，所以它不是我，但這個網站是你需要幫助的代碼，而不是建議。 – Christina 2015-02-10 21:06:38

這Bootply例如可能會有所幫助：http://www.bootply.com/79859

  <!-- 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> 
      <li> <a id="carousel-selector-6"> 
      <img src="http://placehold.it/80x60&amp;text=seven" class="img-responsive"> 
      </a></li> 
      <li> <a id="carousel-selector-7"> 
      <img src="http://placehold.it/80x60&amp;text=eight" class="img-responsive"> 
      </a></li> 
      </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> 
          <div class="item" data-slide-number="5"> 
           <img src="http://placehold.it/1200x480&amp;text=six" class="img-responsive"> 
          </div> 
          <div class="item" data-slide-number="6"> 
           <img src="http://placehold.it/1200x480&amp;text=seven" class="img-responsive"> 
          </div> 
          <div class="item" data-slide-number="7"> 
           <img src="http://placehold.it/1200x480&amp;text=eight" class="img-responsive"> 
          </div> 
         </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>

來源

2015-02-10 20:46:31 grownupteeth

謝謝。幾乎是我期望在功能上完成的。謝謝。 – 2015-02-10 21:02:42

我們如何將旋轉木馬功能添加到縮略圖中，以便它們在數量較多時只出現在一行中？ – Moax6629 2016-02-02 10:05:42

尋找BootStrap 3.0旋轉木馬照片庫

回答

相關問題