Guten Abend.Bootstrap Karussell Rutsche "Gegenstand aktiv" Sprung von oben
Ich habe ein Problem mit meinem Karussell Slide. am Anfang, jede Folie Sprungform oben + - 5 px runter. Also änderte ich dies:
.carousel-inner > .prev {
position: absolute;
top: 0;
width: 880px;
}
zu
.carousel-inner > .prev {
position: absolute;
width: 880px;
}
nun dieses Problem behoben wurde. Das einzige Problem ist, die Folie mit den Klassen Item und aktiven Sprüngen jetzt runter. Aber ich finde nichts, um das zu beheben.
Theres meine 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%;
}
Und heres mein Karussell-Code:
<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 -->
Thank you!
Mit freundlichen Grüßen Merkes Andy
Jetzt springt jeder Schlitten: P aber niemand sollte springen. –