0
カルーセルがスクロールするたびに、私のブートストラップカルーセルがちょっと上がってきます。赤い線は、ボックスがどこに移動するかを示します。移行は非常に迅速ですが、それはまだ明らかです。どうすればこの問題を解決できますか？スクロールすると、ブートストラップカルーセルが少し上から下に移動します。
<div class="container-fluid">
<div class="row-fluid">
<div class="col-md-12">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
</ul>
</div><!-- /Slide1 -->
<div class="item">
<ul class="thumbnails">
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
</ul>
</div><!-- /Slide2 -->
<div class="item">
<ul class="thumbnails">
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
</ul>
</div><!-- /Slide3 -->
</div>
<div class="control-box">
<a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a>
<a data-slide="next" href="#myCarousel" class="carousel-control right">›</a>
</div><!-- /.control-box -->
</div><!-- /#myCarousel -->
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container -->
#myCarousel {
position: center;
padding: 2em;
}
/* Thumbnail Box */
.caption h4 {
font-size: 22px;
color: #ffffff;
text-align: left;
}
.btn.btn-mini {
font-size: 18px;
background-color: #00bcb3;
color: #ffffff;
}
/* Carousel Control */
.control-box {
text-align: right;
width: 100%;
}
.carousel-control{
background: #000000;
display: inline-block;
font-size: 34px;
font-weight: 600;
line-height: 25px;
opacity: 100;
padding: 4px 10px 0px;
position: static;
height: 40px;
width: 40px;
}
// Carousel Auto-Cycle
$(document).ready(function() {
$('.carousel').carousel({
interval: 8000
})
});
ありがとうございますが、max-heightを試しましたが、カルーセルはまだ動いています。 – xtjnrchris