引导轮播标题转换错误
Posted
技术标签:
【中文标题】引导轮播标题转换错误【英文标题】：Bootstrap Carousel Caption Transition Bug 【发布时间】：2016-08-31 14:25:27 【问题描述】：所以我有一个轮播滑块、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 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 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 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>
注意当它自动滑动时（或单击下一个/上一个时）下一个标题如何出现在左下方？
有什么想法吗？
【问题讨论】：
奇怪的是，如果你将 CSS 从<style> 标签移到 codepen 的 CSS 部分，问题会从显示在左下角的元素变为垂直拉伸。
@Leo，是的，我注意到了。我实际上将 css 样式放在了 html 中，因为那是在使用链接样式表复制我在本地计算机上所体验的内容。
【参考方案1】：
问题出在这里：
.carousel .prev,
.carousel .next
<a class="prev ..." ...
<a class="next" ...
Carousel.js 将这些类用于动画。项目接收这些类开始滑动：
尝试使用其他类：
.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;
检查结果：
$('.carousel').carousel( interval: 3500 )@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;
<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" >
<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" >
<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" >
<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>http://codepen.io/glebkema/full/KzJpwV/
【讨论】：
以上是关于引导轮播标题转换错误的主要内容，如果未能解决你的问题，请参考以下文章