晚安。
我的旋转木马幻灯片有问题。 在开始时,每个幻灯片跳转顶部+ - 5 px向下。 所以我改变了这个:
.carousel-inner > .prev {
position: absolute;
top: 0;
width: 880px;
}
到
.carousel-inner > .prev {
position: absolute;
width: 880px;
}
现在这已经修复了。 唯一的问题是,带有类项目和活动跳转的幻灯片现在已经关闭。 但我找不到任何解决方法。
Theres my Css:
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
padding-right: 35px;
}
.carousel-inner > .item {
position: relative;
display: none;
-webkit-transition: .6s ease-in-out left;
-o-transition: .6s ease-in-out left;
transition: .6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
line-height: 1;
}
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-inner > .item {
-webkit-transition: -webkit-transform .6s ease-in-out;
-o-transition: -o-transform .6s ease-in-out;
transition: transform .6s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.carousel-inner > .item.next.left,
.carousel-inner > .item.prev.right,
.carousel-inner > .item.active {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
display: block;
}
.carousel-inner > .active {
left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
position: absolute;
width: 880px;
}
.carousel-inner > .next {
left: 100%;
}
.carousel-inner > .prev {
left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
left: 0;
}
.carousel-inner > .active.left {
left: -100%;
}
.carousel-inner > .active.right {
left: 100%;
}
继承我的Carousel代码:
<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://puu.sh/nOpej/23914acabc.png" alt=""></a>
</div>
<div class="caption">
<h4>BMW</h4><hr>
<h5>i8 Lux Car Performance</h5>
<span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br>
<span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br>
<span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a>
</div>
<div class="caption">
<h4>BMW</h4><hr>
<h5>i8 Lux Car Performance</h5>
<span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br>
<span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br>
<span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a>
</div>
<div class="caption">
<h4>BMW</h4><hr>
<h5>i8 Lux Car Performance</h5>
<span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br>
<span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br>
<span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a>
</div>
<div class="caption">
<h4>BMW</h4><hr>
<h5>i8 Lux Car Performance</h5>
<span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br>
<span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br>
<span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span>
<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://puu.sh/nOpej/23914acabc.png" alt=""></a>
</div>
<div class="caption">
<h4>BMW</h4><hr>
<h5>i8 Lux Car Performance</h5>
<span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br>
<span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br>
<span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a>
</div>
<div class="caption">
<h4>BMW</h4><hr>
<h5>i8 Lux Car Performance</h5>
<span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br>
<span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br>
<span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a>
</div>
<div class="caption">
<h4>BMW</h4><hr>
<h5>i8 Lux Car Performance</h5>
<span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br>
<span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br>
<span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a>
</div>
<div class="caption">
<h4>BMW</h4><hr>
<h5>i8 Lux Car Performance</h5>
<span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br>
<span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br>
<span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span>
<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://puu.sh/nOpej/23914acabc.png" alt=""></a>
</div>
<div class="caption">
<h4>BMW</h4><hr>
<h5>i8 Lux Car Performance</h5>
<span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br>
<span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br>
<span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a>
</div>
<div class="caption">
<h4>BMW</h4><hr>
<h5>i8 Lux Car Performance</h5>
<span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br>
<span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br>
<span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a>
</div>
<div class="caption">
<h4>BMW</h4><hr>
<h5>i8 Lux Car Performance</h5>
<span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br>
<span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br>
<span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail">
<a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a>
</div>
<div class="caption">
<h4>BMW</h4><hr>
<h5>i8 Lux Car Performance</h5>
<span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br>
<span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br>
<span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
</ul>
</div><!-- /Slide3 -->
</div>
<div class="control-box">
<br> <a data-slide="prev" href="#myCarousel" style="float:left; padding-left:5px;"><button type="button" class="btn btn-primary">Previous</button></a>
<a data-slide="next" href="#myCarousel" style="float:right; padding-right:5px;"><button type="button" class="btn btn-primary">Next</button></a>
</div><!-- /.control-box -->
</div><!-- /#myCarousel -->
谢谢!
此致 Merkes Andy
答案 0 :(得分:0)
可能不是一个完美的解决方案,但我尝试删除width: 880px;
它似乎仍然略有跳跃
.carousel-inner > .prev {
position: absolute;
}