CODEWITHSUNDEEP
jquerycsstwitter-bootstrap-3
Mike
Mike

Reputation: 6050

Carousel works in Bootply but not my site

So I was working on a sample with the bootply.com website

Sample

And it works fine. When I port the code over to my live site I get this weird behavior when both divs show up during the transition.

I can not spot the difference.

enter image description here

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>

Site 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>

Upvotes: 1

Views: 134

Answers (1)

potatopeelings
potatopeelings

Reputation: 41065

Remove

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

This carousel wrapper stretches the entire height (beyond what one slide would would). So you'll see the new slide being appended to the bottom and it sliding up (normally all this would be hidden because of an overflow: hidden on the same element)

Upvotes: 1

Related Questions