Question

我正在尝试实现bootstrap的缩略图轮播，但遇到了问题。

我让它在JSFiddle中运行，但是问题是轮播取决于每行的一组图像。我不知道每个产品将加载多少张图像。是否有必要消除每行中的图像并且该行中有无限数量的图像，或者一旦图像达到一定数量（ex：3）就有可能动态添加新行

这是我到目前为止所拥有的：

HTML

<div class="container">
  <div class="row">
    <div class="span12">
      <div class="well"> 

        <div id="myCarousel" class="carousel slide">

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

          <!-- Carousel items -->
          <div class="carousel-inner">

          <div class="item active">
            <div class="row-fluid">
             <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
             <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
             <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
             <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
           </div><!--/row-fluid-->
         </div><!--/item-->

         <div class="item">
           <div class="row-fluid">
             <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
             <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
             <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
             <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
           </div><!--/row-fluid-->
         </div><!--/item-->

         <div class="item">
           <div class="row-fluid">
             <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
             <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
             <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
             <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
           </div><!--/row-fluid-->
         </div><!--/item-->

        </div><!--/carousel-inner-->

        <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
        </div><!--/myCarousel-->
      </div><!--/well-->   
    </div>
  </div>
</div>

CSS

/* Removes the default 20px margin and creates some padding space for the indicators and controls */
.carousel {
  margin-bottom: 0;
  padding: 0 40px 30px 40px;
}

/* Reposition the controls slightly */
.carousel-control {
  left: -12px;
}

a:visited, a:active, a:focus{
  outline: none; 
}

.carousel-control.right {
  right: -12px;
}

/* Changes the position of the indicators */
.carousel-indicators {
  right: 50%;
  top: auto;
  bottom: 0px;
  margin-right: -19px;
}

/* Changes the colour of the indicators */
.carousel-indicators li {
  background: #c0c0c0;
}
.carousel-indicators .active {
  background: #333333;
}

/* CUSTOM */
@media only screen and (max-width: 767px){
.row-fluid [class*="span"] {
  float: left;
  display: block;
  width: 25%;
  margin-left: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
}

.thumbnail img{
  max-width: 100%;
}

JQUERY

$(document).ready(function() {
  $('#myCarousel').carousel({
    interval: false
  })
});

Bootstrap缩略图轮播-动态加载的图片

0 个答案: