1
我一直在試圖修改引導3.3.5旋轉木馬有多個圖像顯示的不是標準的單一形象。該方法涉及覆蓋幻燈片操作的股票translate3d變換值，以使其在圖像之間移動時一次只能前進一個。我使用了自定義的this post中的變換覆蓋。這是我的基本設置的pen。引導轉盤translate3d覆蓋不工作的火狐，IE
，直到我嘗試在Firefox（和IE）這一切工作正常。 translate3d效果完全不起作用。從我讀過translate3d約firefox's implementation它應該工作（v41.0.2）。我原本以爲FF不喜歡百分比，但我剛剛提到的鏈接只說沒有tz值的百分比。所以我不知道爲什麼它不起作用。
我在這所以我猜有人大規模的小白將只是看一眼它，吹我的心，但我真的很想知道之前我移動到其他的方法，爲什麼它的發生。
我明白任何輸入，如果你有時間，謝謝。
這裏是我的代碼（codepen版本的作品應該的方式，但這裏的嵌入代碼段不確實因爲某些原因）
var mod_screen = function() {
/* Cleanup extra divs that were added in previous resizing */
$('.item').each(function(){
$(this).children('div:not(:first)').remove();
});
$('.carousel .item').each(function(){
var next = $(this).next(), i;
if (Modernizr.mq('(min-width: 768px) and (max-width: 991px)')) {
/* Small screen sizes */
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
} else if (Modernizr.mq('(min-width: 992px) and (max-width: 1199px)')) {
/* Medium screen sizes */
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (i=0;i<1;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
} else if (Modernizr.mq('(min-width: 1200px)')) {
/* Large screen sizes */
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
}
});
}
$(function() {
// Call on every window resize
$(window).resize(mod_screen);
// Call once on initial load
mod_screen();
});@media screen and (min-width: 768px) and (max-width: 991px) {
.carousel-inner .active.left { left: -50%; }
.carousel-inner .next { left: 50%; }
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
transform: translate3d(50%, 0, 0);
-webkit-transform: translate3d(50%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
transform: translate3d(-50%, 0, 0);
-webkit-transform: translate3d(-50%, 0, 0);
}
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
.carousel-inner .active.left { left: -33.3333%; }
.carousel-inner .next { left: 33.3333%; }
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
transform: translate3d(33.3333%, 0, 0);
-webkit-transform: translate3d(33.3333%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
transform: translate3d(-33.3333%, 0, 0);
-webkit-transform: translate3d(-33.3333%, 0, 0);
}
}
@media screen and (min-width: 1200px) {
.carousel-inner .active.left { left: -25%; }
.carousel-inner .next { left: 25%; }
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
transform: translate3d(25%, 0, 0);
-webkit-transform: translate3d(25%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
transform: translate3d(-25%, 0, 0);
-webkit-transform: translate3d(-25%, 0, 0);
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row carousel slide" id="index-carousel-lg">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<a href="#"><img src="http://placehold.it/475x150&text=01" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<a href="#"><img src="http://placehold.it/475x150&text=02" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<a href="#"><img src="http://placehold.it/475x150&text=03" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<a href="#"><img src="http://placehold.it/475x150&text=04" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<a href="#"><img src="http://placehold.it/475x150&text=05" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<a href="#"><img src="http://placehold.it/475x150&text=06" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<a href="#"><img src="http://placehold.it/475x150&text=07" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<a href="#"><img src="http://placehold.it/475x150&text=08" class="img-responsive"></a>
</div>
</div>
</div>
<a class="left carousel-control" href="#index-carousel-lg" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#index-carousel-lg" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>