jquery - 轮播在 Bootply 中有效，但在我的网站中无效

所以我正在使用 bootply.com 网站制作示例

而且效果很好。当我将代码移植到我的实时站点时，当两个 div 在转换期间出现时，我会得到这种奇怪的行为。

我看不出区别。

$(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>

最佳答案

移除

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

这个旋转木马包装器延伸了整个高度(超出了一张幻灯片的高度)。所以你会看到新的幻灯片被附加到底部并向上滑动(通常所有这些都会被隐藏，因为同一元素上的 overflow: hidden)

关于jquery - 轮播在 Bootply 中有效，但在我的网站中无效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31787994/

jquery - 轮播在 Bootply 中有效，但在我的网站中无效

上一篇：javascript - 添加 :before to an object javascript

下一篇：jquery - Owl Carousel slider - 是否可以通过悬停分页器而不是单击分页器进行控制？