Bootstrap Carousel Caption Transition Bug

时间：2016-05-05 17:27:51

标签： html css twitter-bootstrap

所以我有一个旋转木马滑块，3张幻灯片，3个字幕。

一切都运转正常，我已将字幕定位到我希望它们的位置，但当我滑过它们时 - 短暂的一秒，下一个标题位于错误的位置。

http://codepen.io/anon/pen/jqXVvL 

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <link href="css/main.css" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">


  <style>
      @media (max-width: 768px) {
      .btn-responsive {
        padding:2px 4px;
        font-size:80%;
        line-height: 1;
        border-radius:3px;
      }
    }

    @media (min-width: 769px) and (max-width: 992px) {
      .btn-responsive {
        padding:4px 9px;
        font-size:90%;
        line-height: 1.2;
      }
    }
  .carousel-inner > .item > img, .carousel-inner > .item > a > img {
    width: 100%;
    }

    .carousel .prev,
    .carousel .next {
      position: absolute;
      top: 50%;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      display: inline-block;
      margin-top: -50px;
      font-size: 24px;
      height: 50px;
      width: 50px;
      line-height: 50px;
      text-align: center;
      border-radius: 4px;
      z-index: 5;
    }
    .carousel .prev:hover,
    .carousel .next:hover {
      background-color: rgba(0, 0, 0, 0.5);
    }
    .carousel .prev {
      left: 10px;
    }
    .carousel .next {
      right: 10px;
    }

    .carousel-indicators li{
        background-color: #52b6ec;
    }

    .carousel-caption {
        width: 25vw;
        text-align: left;
        top: 25%;
        transform: translateY(-25%);
        bottom: initial;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;

    }

    .carousel-caption h3 {
        padding: 0;
        margin: 0;
        font-size: 4vw;
        border-bottom: 1px solid white;
    }

    .carousel-shade {
        background-color: rgba(0, 0, 0, 0.2);
        border-top: 1px solid white;
        border-bottom: 1px solid white;
    }

    .carousel-caption p {
        font-size: 1.1vw;
    }

    .caption-slide1 button {
        background-color: #52b6ec;
        white-space: normal;
        margin-top: 1vw;
    }
  </style>
</head>

<body>
  <div class="carousel slide" id="carousel">
    <ol class="carousel-indicators">
      <li class="active" data-slide-to="0" data-target="#carousel"></li>
      <li data-slide-to="1" data-target="#carousel"></li>
      <li data-slide-to="2" data-target="#carousel"></li>
    </ol>
    <div class="carousel-inner">
      <div class="item active">
        <img alt="Innova" class="img-responsive" src="http://placehold.it/1920x650&text=Slide One">
        <div class="carousel-caption caption-slide1">
          <div class="carousel-shade">
            <h3>Caption 1</h3>
            <p class="hidden-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pellentesque urna ipsum, a placerat tortor tincidunt vitae. Quisque consequat sit amet elit nec luctus. Mauris malesuada ac leo et elementum. </p>
          </div><button class="btn btn-primary btn-responsive" type="button">Learn More</button>
        </div>
      </div>
      <div class="item">
        <img alt="Innova" class="img-responsive" src="http://placehold.it/1920x650&text=Slide Two">
        <div class="carousel-caption caption-slide1">
          <div class="carousel-shade">
            <h3>Featured:<br>
                        An Item</h3>
            <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum viverra pulvinar ex eget molestie. Nulla posuere scelerisque dui. Praesent a rutrum magna. Nulla id quam lacus. Integer nec posuere lectus. Aliquam vel ante vel tortor varius
              sollicitudin venenatis vel libero. Sed feugiat id lorem in auctor.</p>
          </div><button class="btn btn-primary btn-sm" type="button">Learn More</button>
        </div>
      </div>
      <div class="item">
        <img alt="Innova" class="img-responsive" src="http://placehold.it/1920x650&text=Slide Three">
        <div class="carousel-caption caption-slide2">
          <div class="carousel-shade">
            <h3>Third Slide!</h3>
            <p class="">Etiam vel facilisis eros. Fusce vehicula viverra luctus. Pellentesque nec ipsum commodo, dapibus ipsum eget, cursus risus. Duis dictum erat ligula, eu faucibus purus interdum ac. </p>
          </div><button class="btn btn-primary btn-sm" type="button" href="commercial.html">Learn More</button>
        </div>
      </div>
    </div>
    <a class="prev left" data-slide="prev" href="#carousel"><i aria-hidden="true" class="fa fa-angle-left"></i></a>
    <a class="next" data-slide="next" href="#carousel"><i aria-hidden=
        "true" class="fa fa-angle-right"></i></a>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>$('.carousel').carousel({ interval: 3500 })</script>
</body>
</html>

请注意当它自动滑动时（或当你点击下一个/上一个时）左下角会出现下一个标题？

有什么想法吗？

1 个答案:

答案 0 :(得分：0)

问题在于：

.carousel .prev,
.carousel .next {

<a class="prev ..." ...
<a class="next" ...

Carousel.js将这些类用于动画。 Item接收这些类以开始滑动：

The item receives a class for one second.

尝试使用其他课程：

.carousel-control .left,
.carousel-control .right {

.carousel-control .icon-prev,
.carousel-control .icon-next {

<a class="left carousel-control" ...><span class="icon-prev">...</span></a>
<a class="right carousel-control" ...><span class="icon-next">...</span></a>

类img-responsive不是必需的。 Bootstrap.css已经定义了these attributes：

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}

检查结果：

＆＃13;
＆＃13; 
$('.carousel').carousel({ interval: 3500 })
＆＃13; 
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');        
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');        

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  width: 100%;
}

@media (max-width: 768px) {
  .btn-responsive {
    padding: 2px 4px;
    font-size: 80%;
    line-height: 1;
    border-radius: 3px;
  }
}

@media (min-width: 769px) {
  .btn-responsive {
    padding: 4px 9px;
    font-size: 90%;
    line-height: 1.2;
  }
}

.carousel-control .icon-prev,
.carousel-control .icon-next {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  margin-top: -50px;
  font-size: 24px;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 4px;
}
.carousel-control .icon-prev:hover,
.carousel-control .icon-next:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.carousel-control .icon-prev {
  left: 10px;
  margin-left: 0;
}
.carousel-control .icon-next {
  right: 10px;
  margin-right: 0;
}
.carousel-control .icon-prev:before,
.carousel-control .icon-next:before {
  content: '';
}
.carousel-control.left,
.carousel-control.right {
  background-image: none;
  filter: none;
}

.carousel-indicators li{
    background-color: #52b6ec;
}

.carousel-caption {
    width: 25vw;
    text-align: left;
    top: 25%;
    transform: translateY(-25%);
    bottom: initial;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;

}
.carousel-shade {
    background-color: rgba(0, 0, 0, 0.2);
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}
.carousel-caption h3 {
    padding: 0;
    margin: 0;
    font-size: 4vw;
    border-bottom: 1px solid white;
}
.carousel-caption p {
    font-size: 1.1vw;
}

.caption-slide1 button {
    background-color: #52b6ec;
    white-space: normal;
    margin-top: 1vw;
}
＆＃13; 
<div id="carousel-id" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-id" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-id" data-slide-to="1"></li>
    <li data-target="#carousel-id" data-slide-to="2"></li>
  </ol>

  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://placehold.it/1920x650&text=Slide%20One" alt="Slide One">
      <div class="carousel-caption">
        <div class="carousel-shade">
          <h3>Caption 1</h3>
          <p class="hidden-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pellentesque urna ipsum, a placerat tortor tincidunt vitae. Quisque consequat sit amet elit nec luctus. Mauris malesuada ac leo et elementum. </p>
        </div>
        <button class="btn btn-primary btn-responsive" type="button">Learn More</button>
      </div>
    </div>

    <div class="item">
      <img src="http://placehold.it/1920x650&text=Slide%20Two" alt="Slide Two">
      <div class="carousel-caption">
        <div class="carousel-shade">
          <h3>Featured:<br>An Item</h3>
          <p class="hidden-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum viverra pulvinar ex eget molestie. Nulla posuere scelerisque dui. Praesent a rutrum magna. Nulla id quam lacus. Integer nec posuere lectus. Aliquam vel ante vel tortor varius sollicitudin venenatis vel libero. Sed feugiat id lorem in auctor.</p>
        </div>
        <button class="btn btn-primary btn-responsive" type="button">Learn More</button>
      </div>
    </div>
    
    <div class="item">
      <img src="http://placehold.it/1920x650&text=Slide%20Three" alt="Slide Three">
      <div class="carousel-caption">
        <div class="carousel-shade">
          <h3>Third Slide!</h3>
          <p class="hidden-xs">Etiam vel facilisis eros. Fusce vehicula viverra luctus. Pellentesque nec ipsum commodo, dapibus ipsum eget, cursus risus. Duis dictum erat ligula, eu faucibus purus interdum ac.</p>
        </div>
        <button class="btn btn-primary btn-responsive" type="button" href="commercial.html">Learn More</button>
      </div>
    </div>
  </div>

  <a class="left carousel-control" href="#carousel-id" role="button" data-slide="prev">
    <span class="icon-prev"><i aria-hidden="true" class="fa fa-angle-left"></i></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-id" role="button" data-slide="next">
    <span class="icon-next"><i aria-hidden="true" class="fa fa-angle-right"></i></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
＆＃13;
＆＃13;
＆＃13;

http://codepen.io/glebkema/full/KzJpwV/

相关问题
最新问题