寻找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旋转木马照片库

回答

相关问题