bootstrap多項目傳送帶一次移動一個項目點擊？

Bootstrap多項目傳送帶移動在一個項目，我複製代碼從這個link，現在我試圖在我的本地環境（本地主機）實現這一效果相同，但它會不同？可以請你幫bootstrap多項目傳送帶一次移動一個項目點擊？

添加CSS的鏈接和JS

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="js/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script>

CSS

.carousel-inner .active.left { left: -33%;    } 
.carousel-inner .active.right { left: 33%;    } 
.carousel-inner .next   { left: 33%    } 
.carousel-inner .prev   { left: -33%    } 
.carousel-control.left  { background-image: none; } 
.carousel-control.right  { background-image: none; } 
.carousel-inner .item   { background: white;  }

HTML

<div id="myCarousel" class="carousel slide"> 
     <div class="carousel-inner"> 
     <div class="item active"> 
      <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500/bbbbbb/fff&amp;text=1" class="img-responsive"></a></div> 
     </div> 
     <div class="item"> 
      <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500/CCCCCC&amp;text=2" class="img-responsive"></a></div> 
     </div> 
     <div class="item"> 
      <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a></div> 
     </div> 
     <div class="item"> 
      <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a></div> 
     </div> 
     <div class="item"> 
      <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=5" class="img-responsive"></a></div> 
     </div> 
     <div class="item"> 
      <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a></div> 
     </div> 
     </div> 

     <!-- Controls --> 
     <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
     </a> 
    </div>

jQuery的

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

    $('.carousel .item').each(function(){ 
     var next = $(this).next(); 
     if (!next.length) { 
     next = $(this).siblings(':first'); 
     } 
     next.children(':first-child').clone().appendTo($(this)); 

     if (next.next().length>0) { 
     next.next().children(':first-child').clone().appendTo($(this)); 
     } 
     else { 
     $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); 
     } 
    });

來源

2016-04-01 ramesh bogandla

我不知道那的jsfiddle很好，但我試圖複製並粘貼在自己的首發模板中的小提琴，它工作正常。我想你沒有包含jquery或類似的東西。我的代碼應該可以工作，除非你必須檢查你是否有css，jquery，javascript包括glyphicons。所以我的建議是下載一個引導啓動文件夾（https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip）並粘貼到index.html文件的代碼..

<!DOCTYPE html> 
<html lang="en"> 

<head> 

<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="description" content=""> 
<meta name="author" content=""> 

<title>Bootstrap starters template</title> 

<!-- Bootstrap Core CSS --> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.css" rel="stylesheet"> 


<style> 
    .carousel-inner .active.left { left: -33%;    } 
    .carousel-inner .active.right { left: 33%;    } 
    .carousel-inner .next   { left: 33%    } 
    .carousel-inner .prev   { left: -33%    } 
    .carousel-control.left  { background-image: none; } 
    .carousel-control.right  { background-image: none; } 
    .carousel-inner .item   { background: white;  } 
</style> 



</head> 

<body> 


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

<div class="carousel-inner"> 
    <div class="item active"> 
     <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500/bbbbbb/fff&amp;text=1" class="img-responsive"></a></div> 
    </div> 
    <div class="item"> 
     <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500/CCCCCC&amp;text=2" class="img-responsive"></a></div> 
    </div> 
    <div class="item"> 
     <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a></div> 
    </div> 
    <div class="item"> 
     <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a></div> 
    </div> 
    <div class="item"> 
     <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=5" class="img-responsive"></a></div> 
    </div> 
    <div class="item"> 
     <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a></div> 
    </div> 
</div> 

<!-- Controls --> 
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
</a> 
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
</a> 
</div> 



<!-- jQuery --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js"></script> 

<!-- Bootstrap Core JavaScript --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.js"></script> 

<!-- Script to Activate the Carousel --> 
<script> 

    $('#myCarousel').carousel({ 
     interval: 10000 
    }); 

    $('.carousel .item').each(function(){ 
     var next = $(this).next(); 
     if (!next.length) { 
      next = $(this).siblings(':first'); 
     } 
     next.children(':first-child').clone().appendTo($(this)); 

     if (next.next().length>0) { 
      next.next().children(':first-child').clone().appendTo($(this)); 
     } 
     else { 
      $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); 
     } 
    }); 

</script> 

</body> 

</html>

來源

2016-04-01 07:28:25 Gijsberts

IT工作，但3個項目的是顯示我需要4個項目我試圖COL-MD-4 COL-MD-3，但不顯示4項在時間 –

這不是你要求的，也沒有顯示在jsfiddle ..不能幫助你，因爲它的JavaScript問題 – Gijsberts

bootstrap多項目傳送帶一次移動一個項目點擊？

回答

相關問題