傳送帶工作在Bootply但不是我的網站

所以我工作的一個樣品與bootply.com網站傳送帶工作在Bootply但不是我的網站

，它工作正常。當我將代碼移植到我的現場網站時，當轉換過程中出現兩個div時，我會得到這種奇怪的行爲。

我無法找到差異。

的js

$(document).ready(function(){ 
    $("#myCarousel").carousel({ 
     interval: 3000 
    }); 
}); // document.ready

CSS

.vertical .carousel-inner { 
    height: 100%; 
} 

.carousel.vertical .item { 
    -webkit-transition: 0.6s ease-in-out top; 
    -moz-transition: 0.6s ease-in-out top; 
     -ms-transition: 0.6s ease-in-out top; 
     -o-transition: 0.6s ease-in-out top; 
      transition: 0.6s ease-in-out top; 
} 

.carousel.vertical .active { 
    top: 0; 
} 

.carousel.vertical .next { 
    top: 40px; 
} 

.carousel.vertical .prev { 
    top: -40px; 
} 

.carousel.vertical .next.left, 
.carousel.vertical .prev.right { 
    top: 0; 
} 

.carousel.vertical .active.left { 
    top: -40px; 
} 

.carousel.vertical .active.right { 
    top: 40px; 
} 

.carousel.vertical .item { 
    left: 0; 
}

HTML

<div id="myCarousel" class="carousel slide vertical"> 
    <!-- Carousel items --> 
    <div class="carousel-inner"> 
     <div class="active item"> 
      <img src="http://placehold.it/600x40/FF0000/FFFFFF/?text=First+Slide" 
      class="img-responsive"> 
     </div> 
     <div class="item"> 
      <img src="http://placehold.it/600x40/00FF00/FFFFFF/?text=Second+Slide" 
      class="img-responsive"> 
     </div> 
     <div class="item"> 
      <img src="http://placehold.it/600x40/0000FF/FFFFFF/?text=Third+Slide" 
      class="img-responsive"> 
     </div> 
    </div> 
</div>

網站HTML

<html> 
<head> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="LegalBanner.css"> 

</head> 
<body> 


     <div id="myCarousel" class="carousel slide vertical"> 
     <!-- Carousel items --> 
     <div class="carousel-inner"> 
      <div class="active item"> 
       <img src="http://placehold.it/600x40/FF0000/FFFFFF/?text=First+Slide" 
       class="img-responsive"> 
      </div> 
      <div class="item"> 
       <img src="http://placehold.it/600x40/00FF00/FFFFFF/?text=Second+Slide" 
       class="img-responsive"> 
      </div> 
      <div class="item"> 
       <img src="http://placehold.it/600x40/0000FF/FFFFFF/?text=Third+Slide" 
       class="img-responsive"> 
      </div> 
     </div> 
    </div> 


    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="LegalBanner.js"></script> 
</body> 
</html>

來源

2015-08-03 Mike

刪除

.vertical .carousel-inner { 
    height: 100%; 
}

該轉盤延伸包裝的整個高度（超出一個幻燈片會會）。所以你會看到新的幻燈片被追加到底部，並且它向上滑動（通常所有這些都會因相同元素上的overflow: hidden而被隱藏）

來源

2015-08-03 13:04:24 potatopeelings

修復了它，謝謝。我只是不知道爲什麼Bootply網站沒有這個問題。 – Mike

傳送帶工作在Bootply但不是我的網站

回答

相關問題