代码之家 › 专栏 › 技术社区 › Mike

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

twitter-bootstrap-3 css jquery

Mike · 技术社区 · 9 年前

所以我在用靴子做一个样品。com网站

Sample

而且效果很好。当我将代码移植到我的实时站点时,当两个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>

1 回复 | 直到 9 年前

potatopeelings 9 年前

去除

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

这张旋转包装纸拉伸了整个高度(超过了一张幻灯片的高度)。因此,您将看到新幻灯片被附加到底部,并向上滑动(通常,由于 overflow: hidden 在同一元件上)