Twitter Bootstrap Carousel插件可以淡入幻灯片过渡

我正在使用的网站（http://furnitureroadshow.com/）上有一个非常基本的Twitter Bootstrap Carousel插件实现。 我只是想知道是否有人扩展了Carousel插件，使其在幻灯片转换中淡入淡出？

我在github.com（https://github.com/twitter/bootstrap/issues/2050）上发现了这个问题＃2050，似乎表明在这一点上，这是不可能的。 只是想看看是否可以或已经完成。

Answer 1

是。 Bootstrap使用CSS转换，因此可以轻松完成，而无需使用任何Javascript。

CSS：

.carousel .item {-webkit-transition: opacity 3s; -moz-transition: opacity 3s; -ms-transition: opacity 3s; -o-transition: opacity 3s; transition: opacity 3s;} .carousel .active.left {left:0;opacity:0;z-index:2;} .carousel .next {left:0;opacity:1;z-index:1;} 

然而，我注意到过渡结束事件过早地以5s的默认间隔和3s的淡入过渡发射。 将旋转木马间隔颠倒为8秒可以提供很好的效果。

非常光滑。

Answer 2

是。 虽然我使用下面的代码。

 .carousel.fade { opacity: 1; .item { -moz-transition: opacity ease-in-out .7s; -o-transition: opacity ease-in-out .7s; -webkit-transition: opacity ease-in-out .7s; transition: opacity ease-in-out .7s; left: 0 !important; opacity: 0; top:0; position:absolute; width: 100%; display:block !important; z-index:1; &:first-child{ top:auto; position:relative; } &.active { opacity: 1; -moz-transition: opacity ease-in-out .7s; -o-transition: opacity ease-in-out .7s; -webkit-transition: opacity ease-in-out .7s; transition: opacity ease-in-out .7s; z-index:2; } } } 

然后将传送带上的class级从“轮播幻灯片”更改为“轮播淡入淡出”。 这在safari，chrome，firefox和IE 10中都能正常工作。它会在IE 9中正确地降级，但是，好的效果不会发生。

编辑：由于这个答案已经得到如此stream行，我已经添加了以下改写为纯粹的CSS而不是上面这是很less：

 .carousel.fade { opacity: 1; } .carousel.fade .item { -moz-transition: opacity ease-in-out .7s; -o-transition: opacity ease-in-out .7s; -webkit-transition: opacity ease-in-out .7s; transition: opacity ease-in-out .7s; left: 0 !important; opacity: 0; top:0; position:absolute; width: 100%; display:block !important; z-index:1; } .carousel.fade .item:first-child { top:auto; position:relative; } .carousel.fade .item.active { opacity: 1; -moz-transition: opacity ease-in-out .7s; -o-transition: opacity ease-in-out .7s; -webkit-transition: opacity ease-in-out .7s; transition: opacity ease-in-out .7s; z-index:2; } 

Answer 3

是。 引导程序使用CSS转换，因此可以轻松完成，没有任何Javascript。 只要使用CSS3。 请看看

 carousel.carousel-fade 

在以下例子的CSS中：

• http://jsfiddle.net/seemly/ww67B/123/
• http://bootply.com/86170
• http://codepen.io/Rowno/pen/Afykb

Answer 4

这是我发现的最好的解决scheme：

http://untame.net/2013/04/twitter-bootstrap-carousel/

Answer 5

在使用Bootstrap 3时遇到了这个问题。我的解决scheme是将carousel-fade类添加到传送带main DIV，并在包含Bootstrap CSS 后的某个位置插入以下CSS：

 .carousel-fade .item { opacity: 0; -webkit-transition: opacity 2s ease-in-out; -moz-transition: opacity 2s ease-in-out; -ms-transition: opacity 2s ease-in-out; -o-transition: opacity 2s ease-in-out; transition: opacity 2s ease-in-out; left: 0 !important; } .carousel-fade .active { opacity: 1 !important; } .carousel-fade .left { opacity: 0 !important; -webkit-transition: opacity 0.5s ease-in-out !important; -moz-transition: opacity 0.5s ease-in-out !important; -ms-transition: opacity 0.5s ease-in-out !important; -o-transition: opacity 0.5s ease-in-out !important; transition: opacity 0.5s ease-in-out !important; } .carousel-fade .carousel-control { opacity: 1 !important; } 

Bootstrap应用的样式转换意味着您必须快速地进行中间步长转换（活动左边，下一个左边），否则该项目最终会消失（因此为1/2秒转换时间）。

我没有尝试调整.item和.left过渡时间，但他们可能需要按比例调整，以保持效果看起来不错。

Answer 6

如果你正在使用Bootstrap 3.3.x然后使用这个代码（你需要添加类名称传送带褪色到您的传送带）。

 .carousel-fade .carousel-inner .item { -webkit-transition-property: opacity; transition-property: opacity; } .carousel-fade .carousel-inner .item, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { opacity: 0; } .carousel-fade .carousel-inner .active, .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-inner .next, .carousel-fade .carousel-inner .prev, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-control { z-index: 2; } 

Answer 7

注意：如果您使用的是Bootstrap + AngularJS + UI Bootstrap，则.left .right和.next类永远不会被添加。 使用下面的链接和Robert McKee的CSS答案的例子。 我想发表评论，因为花了3天才find完整的解决scheme。 希望这可以帮助别人！

https://angular-ui.github.io/bootstrap/#/carousel

在上面的链接中，从UI Bootstrap Demo中进行代码剪切。

 angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) { $scope.myInterval = 5000; var slides = $scope.slides = []; $scope.addSlide = function() { var newWidth = 600 + slides.length + 1; slides.push({ image: 'http://placekitten.com/' + newWidth + '/300', text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' + ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4] }); }; for (var i=0; i<4; i++) { $scope.addSlide(); } }); 

Html从UI Bootstrap， 注意我添加了.fade类的例子。

 <div ng-controller="CarouselDemoCtrl"> <div style="height: 305px"> <carousel class="fade" interval="myInterval"> <slide ng-repeat="slide in slides" active="slide.active"> <img ng-src="{{slide.image}}" style="margin:auto;"> <div class="carousel-caption"> <h4>Slide {{$index}}</h4> <p>{{slide.text}}</p> </div> </slide> </carousel> </div> </div> 

上面Robert McKee的回答

 .carousel.fade { opacity: 1; } .carousel.fade .item { -moz-transition: opacity ease-in-out .7s; -o-transition: opacity ease-in-out .7s; -webkit-transition: opacity ease-in-out .7s; transition: opacity ease-in-out .7s; left: 0 !important; opacity: 0; top:0; position:absolute; width: 100%; display:block !important; z-index:1; } .carousel.fade .item:first-child { top:auto; position:relative; } .carousel.fade .item.active { opacity: 1; -moz-transition: opacity ease-in-out .7s; -o-transition: opacity ease-in-out .7s; -webkit-transition: opacity ease-in-out .7s; transition: opacity ease-in-out .7s; z-index:2; } /* Added z-index to raise the left right controls to the top */ .carousel-control { z-index:3; } 

Answer 8

对于Bootstrap 3.3.6。 – 上面发布的任何答案都不能帮助我为每个浏览器（特别是在Firefox中遇到很多问题）。 希望这可以帮助别人。

只需像这样添加class carousel-fade即可：

 <div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel"> 

并将此代码添加到您的CSS：

 .carousel-fade .carousel-inner .item { -webkit-transition: all 1.1s ease-in-out, opacity 1s ease-in; -moz-transition: all 1.1s ease-in-out, opacity 1s ease-in; -ms-transition: all 1.1s ease-in-out, opacity 1s ease-in; -o-transition: all 1.1s ease-in-out, opacity 1s ease-in; transition: all 1.1s ease-in-out, opacity 1s ease-in; } .carousel-fade .carousel-inner .item, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { opacity: 0 !important; } .carousel-fade .carousel-inner .active, .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1 !important; } .carousel-fade .carousel-control { z-index: 2 !important; }