引导旋转木马：旋转木马

Question

我试图使用图像缩略图来代替orderd名单转盘指标幻灯片的缩略图。我跟着一些指令在这里和jsfiddle

它正常工作创造了这一点，但你可以看到缩略图有一个滚动条，以适应他们。如何在传送带滑动时滑动/移动缩略图？

下面是创建缩略图的CSS：

#carousel-custom .carousel-indicators { 
    margin: 10px 0 0; 
    overflow: auto; 
    position: static; 
    text-align: left; 
    white-space: nowrap; 
    width: 100%; 
} 

#carousel-custom .carousel-indicators li { 
    background-color: transparent; 
    -webkit-border-radius: 0; 
    border-radius: 0; 
    display: inline-block; 
    height: auto; 
    margin: 0 !important; 
    width: auto; 
} 

#carousel-custom .carousel-indicators li img { 
    display: block; 
    opacity: 0.5; 
} 

#carousel-custom .carousel-indicators li.active img { 
    opacity: 1; 
} 

#carousel-custom .carousel-indicators li:hover img { 
    opacity: 0.75; 
} 

#carousel-custom .carousel-outer { 
    position: relative; 
} 

谢谢

Answer 1

$(document).ready(function() { 
 
    $('#myCarousel').carousel({ 
 
\t interval: 10000 
 
\t }) 
 
    
 
    $('#myCarousel').on('slid.bs.carousel', function() { 
 
    \t //alert("slid"); 
 
\t }); 
 
    
 
    
 
});

.carousel-control { 
 
    padding-top:10%; 
 
    width:5%; 
 
}

<div class="container"> 
 
    <div class="col-md-12"> 
 
     <h1>Bootstrap Thumbnail Slider</h1> 
 

 
     <div class="well"> 
 
      <div id="myCarousel" class="carousel slide"> 
 
       
 
       <!-- Carousel items --> 
 
       <div class="carousel-inner"> 
 
        <div class="item active"> 
 
         <div class="row"> 
 
          <div class="col-sm-3"><a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a> 
 
          </div> 
 
          <div class="col-sm-3"><a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a> 
 
          </div> 
 
          <div class="col-sm-3"><a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a> 
 
          </div> 
 
          <div class="col-sm-3"><a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a> 
 
          </div> 
 
         </div> 
 
         <!--/row--> 
 
        </div> 
 
        <!--/item--> 
 
        <div class="item"> 
 
         <div class="row"> 
 
          <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
 
          </div> 
 
          <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
 
          </div> 
 
          <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
 
          </div> 
 
          <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
 
          </div> 
 
         </div> 
 
         <!--/row--> 
 
        </div> 
 
        <!--/item--> 
 
        <div class="item"> 
 
         <div class="row"> 
 
          <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
 
          </div> 
 
          <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
 
          </div> 
 
          <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
 
          </div> 
 
          <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a> 
 
          </div> 
 
         </div> 
 
         <!--/row--> 
 
        </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>