So I have a carousel slider, 3 slides, 3 captions.
Everything is working fine and I've positioned the captions to where I want them to be, but when I slide through them -- for a brief second, the next caption is in the wrong place.
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>
Notice how when it autoslides (or when you click next/previous) the next caption appears on the bottom left?
Any ideas?
<style>tag into the CSS section of codepen, the problem changes from the element showing up in the bottom left while it moves to it being stretched vertically. - Leo Jweda