2014-04-28 95 views
0

嗨,我試圖讓這個演示從http://www.bootply.com/87858加載...複製一切正確(我認爲),但沒有運氣。任何想法是什麼造成這個?引導3縮略圖滑塊

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <meta charset="utf-8"> 
     <title>Bootply.com - Bootstrap 3 Thumbnail Slider</title> 
     <meta name="generator" content="Bootply" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
     <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> 

     <!--[if lt IE 9]> 
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> 
     <![endif]--> 

     <!-- CSS code from Bootply.com editor --> 

<style type="text/css"> 
    .carousel-control { 
padding-top:10%; 
width:5%; 
} 
</style> 
    </head> 

    <!-- HTML code from Bootply.com editor --> 

    <body > 

     <div class="container"> 
    <div class="col-md-12"> 
     <h1>Bootstrap 3 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> 

     <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script type='text/javascript' src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 

     <!-- JavaScript jQuery code from Bootply.com editor --> 

<script type='text/javascript'> 

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

$('#myCarousel').on('slid.bs.carousel', function() { 
//alert("slid"); 
}); 


}); 
</script> 


    </body> 
</html> 
+1

它適用於我這個你發佈的例子。 – paulalexandru

+0

@paulalexandru我發佈的代碼就像demo一樣在本地運行良好?奇怪的是,它只是顯示了垂直框,就像支持文件沒有被讀取一樣。 – acctman

+0

是的,它運作良好。 – paulalexandru

回答