Bootstrap 3旋转木马渐变到新的幻灯片，而不是滑到新的幻灯片

我正在使用Bootstrap 3，未修改。

这里的

<!-- Carousel ================================================== --> <div id="myCarousel" class="carousel slide"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> </ol> <div class="carousel-inner"> <div class="item active carousel-1"> <div class="container"> <div class="carousel-caption"> <h1>Example headline.</h1> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-large btn-primary" href="#">Sign up today</a></p> </div> </div> </div> <div class="item carousel-2"> <div class="container"> <div class="carousel-caption"> <h1>Another example headline.</h1> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p> </div> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div><!-- /.carousel --> 

默认的CSS从bootstrap 3：

 .carousel { position: relative; } .carousel-inner { position: relative; width: 100%; overflow: hidden; } .carousel-inner > .item { position: relative; display: none; -webkit-transition: 0.6s ease-in-out left; transition: 0.6s ease-in-out left; } .carousel-inner > .item > img, .carousel-inner > .item > a > img { display: block; height: auto; max-width: 100%; line-height: 1; } .carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev { display: block; } .carousel-inner > .active { left: 0; } .carousel-inner > .next, .carousel-inner > .prev { position: absolute; top: 0; width: 100%; } .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-control { position: absolute; top: 0; bottom: 0; left: 0; width: 15%; font-size: 20px; color: #ffffff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); opacity: 0.5; filter: alpha(opacity=50); } .carousel-control.left { background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001))); background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%)); background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); } .carousel-control.right { right: 0; left: auto; background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5))); background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0), color-stop(rgba(0, 0, 0, 0.5) 100%)); background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); } .carousel-control:hover, .carousel-control:focus { color: #ffffff; text-decoration: none; opacity: 0.9; filter: alpha(opacity=90); } .carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { position: absolute; top: 50%; left: 50%; z-index: 5; display: inline-block; } .carousel-control .icon-prev, .carousel-control .icon-next { width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; font-family: serif; } .carousel-control .icon-prev:before { content: '\2039'; } .carousel-control .icon-next:before { content: '\203a'; } .carousel-indicators { position: absolute; bottom: 10px; left: 50%; z-index: 15; width: 60%; padding-left: 0; margin-left: -30%; text-align: center; list-style: none; } .carousel-indicators li { display: inline-block; width: 10px; height: 10px; margin: 1px; text-indent: -999px; cursor: pointer; border: 1px solid #ffffff; border-radius: 10px; } .carousel-indicators .active { width: 12px; height: 12px; margin: 0; background-color: #ffffff; } .carousel-caption { position: absolute; right: 15%; bottom: 20px; left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: #ffffff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } .carousel-caption .btn { text-shadow: none; } @media screen and (min-width: 768px) { .carousel-control .icon-prev, .carousel-control .icon-next { width: 30px; height: 30px; margin-top: -15px; margin-left: -15px; font-size: 30px; } .carousel-caption { right: 20%; left: 20%; padding-bottom: 30px; } .carousel-indicators { bottom: 20px; } } 

一些我已经添加的CSS：

  .carousel { height: 500px; } .carousel-inner { height: 100%; } .carousel-1 { height: 100%; background: url(..http://img.dovov.comcarousel1.jpg) no-repeat center center fixed; -webkit-background-size: cover; background-size: cover; } .carousel-2 { height: 100%; background: url(..http://img.dovov.comcarousel2.jpg) no-repeat center center fixed; -webkit-background-size: cover; background-size: cover; } 

但我无法弄清楚这个旋转木马如何能够消失。 我试图改变不透明度从1到0，当有效的项目，但它使2animation，它向左滑动，并改变不透明度..

你可以帮我吗？

Answer 1

从3.2.x到3.3.x的更新打破了一些在这里和其他线程中解释的一些解决scheme，因为改变了：“ 在现代浏览器中增加了转换以改善轮播性能。

如果你使用的是Bootstrap 3.3.x，那么这里有一个解决scheme：
http://codepen.io/transportedman/pen/NPWRGq

基本上你需要添加“传送带褪色”类到你的旋转木马，让你有：
<div class="carousel slide carousel-fade">

然后包括下面的CSS：

 /* Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x) CSS from: http://codepen.io/transportedman/pen/NPWRGq and: http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide Inspired from: http://codepen.io/Rowno/pen/Afykb */ .carousel-fade .carousel-inner .item { opacity: 0; transition-property: opacity; } .carousel-fade .carousel-inner .active { opacity: 1; } .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; } .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-control { z-index: 2; } /* WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers." Need to override the 3.3 new styles for modern browsers & apply opacity */ @media all and (transform-3d), (-webkit-transform-3d) { .carousel-fade .carousel-inner > .item.next, .carousel-fade .carousel-inner > .item.active.right { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-inner > .item.prev, .carousel-fade .carousel-inner > .item.active.left { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-inner > .item.next.left, .carousel-fade .carousel-inner > .item.prev.right, .carousel-fade .carousel-inner > .item.active { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } 

Answer 2

这可以使用只有CSS来完成。 要将轮播更改为淡入淡出而不是幻灯片，请使用以下片段之一（LESS或标准CSS）。

减

 // Fade transition for carousel items .carousel { .item { left: 0 !important; .transition(opacity .4s); //adjust timing here } .carousel-control { background-image: none; // remove background gradients on controls } // Fade controls with items .next.left, .prev.right { opacity: 1; z-index: 1; } .active.left, .active.right { opacity: 0; z-index: 2; } } 

纯CSS：

 /* Fade transition for carousel items */ .carousel .item { left: 0 !important; -webkit-transition: opacity .4s; /*adjust timing here */ -moz-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .carousel-control { background-image: none !important; /* remove background gradients on controls */ } /* Fade controls with items */ .next.left, .prev.right { opacity: 1; z-index: 1; } .active.left, .active.right { opacity: 0; z-index: 2; } 

Answer 3

一些很好的答案，但我所尝试的所有解决scheme的问题是，图像不会相互淡入。 相反，第一个完全消失，比下一个消失。

经过几个小时的testing发现这种溶剂。 Thx to http://www.1squarepear.com/adding-a-responsive-bootstrap-image-carousel-that-fades-instead-of-slides/

1. 在HTML代码中。从.slide更改为.cardede元素上的.fade

2. 在CSS中添加这个：

   .carousel.fade { opacity: 1; } .carousel.fade .item { transition: opacity ease-out .7s; left: 0; opacity: 0; /* hide all slides */ top: 0; position: absolute; width: 100%; display: block; } .carousel.fade .item:first-child { top: auto; opacity: 1; /* show first slide */ position: relative; } .carousel.fade .item.active { opacity: 1; }

Answer 4

您可以使用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; } 

Answer 5

你可以在css3中使用transition：

 .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 6

我使用了简单的.css。 它运作良好。 请注意，我从bootstrap.min.css中删除了以下内容：

 /* Fade transition for carousel items */ .carousel .item { left: 0 !important; -webkit-transition: opacity .4s; /*adjust timing here */ -moz-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .carousel-control { background-image: none !important; /* remove background gradients on controls */ } /* Fade controls with items */ .next.left, .prev.right { opacity: 1; z-index: 1; } .active.left, .active.right { opacity: 0; z-index: 2; } 

Answer 7

对于bootstrap 3，这是我使用的

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

Answer 8

回答gerardnll的答案Less代码扩展Bootstrap 3.3.x旋转木马通过淡入淡出效果：

 // // Carousel Fade effect // -------------------------------------------------- // inspired from http://codepen.io/Rowno/pen/Afykb .carousel-fade { .carousel-inner { .item { .opacity(0); .transition-property(opacity); //.transition-duration(.8s); } .active { .opacity(1); &.left, &.right { left: 0; .opacity(0); z-index: 1; } } .next.left, .prev.right { .opacity(1); } } .carousel-control { z-index: 2; } } // WHAT IS NEW IN 3.3: // "Added transforms to improve carousel performance in modern browsers." // now override the 3.3 new styles for modern browsers & apply opacity @media all and (transform-3d), (-webkit-transform-3d) { .carousel-fade { .carousel-inner { > .item { &.next, &.prev, &.active.right, &.active.left { .opacity(0); .translate3d(0; 0; 0); } &.next.left, &.prev.right, &.active { .opacity(1); .translate3d(0; 0; 0); } } } } } 

唯一的是过渡时间长度超过.8s（大约）时没有按预期工作。 也许有人有解决scheme来解决这个奇怪的行为。

注意： LESS代码有.transition-duration(.8s); 评论，所以使用默认轮播过渡时间。 你可以玩的价值，看看效果。 更长的持续时间（> 0.8）使淡化效果不太平滑。

Answer 9

看看这个： http : //codepen.io/Rowno/pen/Afykb

 .carousel-fade { .carousel-inner { .item { opacity: 0; transition-property: opacity; } .active { opacity: 1; } .active.left, .active.right { left: 0; opacity: 0; z-index: 1; } .next.left, .prev.right { opacity: 1; } } 

奇妙地工作，我希望它的作品