Question

所以我正在使用bootply.com网站制作样本

它工作正常。当我将代码移植到我的实时网站时，当转换过程中出现两个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>

Answer 1

删除

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

这个旋转木马包装纸拉伸整个高度（超出一张幻灯片的高度）。因此，您会看到新幻灯片被附加到底部并向上滑动（通常所有这些都会因为同一元素上的overflow: hidden而被隐藏）

Carousel在Bootply工作但不在我的网站

1 个答案: