Bootstrap Carousel Translation3d覆盖不适用于Firefox，IE [英] bootstrap carousel translate3d override not working for firefox, IE
问题描述
我一直在尝试修改Bootstrap 3.3.5传送带以显示多个图像，而不是标准的单个图像.该方法涉及覆盖用于滑动动作的stock translation3d变换值以使其滑动，因此在图像之间移动时，每次只能向前移动一个.我已经使用了这篇文章中的转换覆盖和自定义项.这是我的基本设置的 pen .
I've been trying to modify the Bootstrap 3.3.5 Carousel to have multiple images display instead of the standard single image. The method involves overriding the stock translate3d transform values for the slide action to make it so it only advances one at a time when moving between images. I've used the transform override from this post with customizations. Here's a pen of my basic setup.
一切正常，直到我在Firefox(以及IE)中尝试为止. translate3d效果根本不起作用.从我所读到的有关 firefox的实现应该可以正常运行(v41.0.2).我本来以为FF不喜欢百分比，但是我刚才提到的链接只表示tz值没有百分比.所以我不知道为什么它不起作用.
It all works fine until I try it in firefox (and also IE). The translate3d effect doesn't work at all. From what I've read about firefox's implementation of translate3d it should work (v41.0.2). I originally thought FF didn't like the percentages but the link I just mentioned only says no percentages for the tz value. So I'm at a loss as to why it's not working.
我是一个笨拙的菜鸟，所以我猜有人会看一眼然后打动我，但我真的很想知道为什么会发生这种情况，然后再转向其他方法.
I'm a massive noob at this so I'm guessing someone will just take one look at it and blow my mind but I'd really like to know why it's happening before I move onto other methods.
如果有时间，我感谢您的投入.
I appreciate any input if you have the time, thanks.
这是我的代码(codepen版本按应有的方式工作，但是由于某些原因，此处的嵌入式代码段不起作用)
Here's my code (the codepen version works the way it should but the embedded snippet here doesn't for some reason)
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>
推荐答案
所以我已经解决了该问题，但是我不确定是为什么会发生这种情况.我添加了三个不包含transform: translate3D的单独的媒体查询，并且更改了现有的媒体查询以检查是否支持transform-3D.标记没有变化，Javascript也没有变化.似乎Firefox和IE现在都对它感到满意.就像我说的，我不知道为什么当文档说FF时不支持FF在我的代码中.如果有人能启发我为什么不起作用，我将不胜感激.这是更新的笔
So I've resolved the issue however I'm not entirely certain why it's happening. I've added three separate media queries that don't include transform: translate3D and I've changed the existing media queries to check for transform-3D support. There's no change to the markup and no change to the Javascript. It seems both Firefox and IE are both happy with it now. Like I said, I don't know why FF doesn't support translate3D in my code when the docs say it does. If anyone can enlighten me on why it doesn't work I'd appreciate it. Here's the updated pen
@media all and (min-width: 768px) and (max-width: 991px) {
.carousel-inner > .next { left: 50%; }
.carousel-inner > .prev { left: -50%; }
.carousel-inner > .active.left { left: -50%; }
.carousel-inner > .active.right { left: 50%; }
}
@media all and (min-width: 992px) and (max-width: 1199px) {
.carousel-inner > .next { left: 33.3333%; }
.carousel-inner > .prev { left: -33.3333%; }
.carousel-inner > .active.left { left: -33.3333%; }
.carousel-inner > .active.right { left: 33.3333%; }
}
@media all and (min-width: 1200px) {
.carousel-inner > .next { left: 25%; }
.carousel-inner > .prev { left: -25%; }
.carousel-inner > .active.left { left: -25%; }
.carousel-inner > .active.right { left: 25%; }
}
@media all and (min-width: 768px) and (max-width: 991px) and ((transform-3d), (-webkit-transform-3d)) {
.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 all and (min-width: 992px) and (max-width: 1199px) and ((transform-3d), (-webkit-transform-3d)) {
.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 all and (min-width: 1200px) and ((transform-3d), (-webkit-transform-3d)) {
.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);
}
}
这篇关于Bootstrap Carousel Translation3d覆盖不适用于Firefox，IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
