Twitter Bootstrap轮播插件能在幻灯片转换时淡入淡出吗？

Question

我在一个网站上使用了Twitter Bootstrap Carousel插件的基本实现（链接：http://furnitureroadshow.com/）。我想知道是否有人扩展了Carousel插件，以便在幻灯片转换时实现淡入淡出效果？

我在Github.com上找到了编号为#2050的问题（链接：https://github.com/twitter/bootstrap/issues/2050），该问题似乎表明目前还不可能实现。只是想看看是否能够或已经完成。

- generalopinion

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;}

然而我注意到，当默认间隔5秒和淡入淡出过渡时间为3秒时，转换结束事件会过早地触发。将轮播间隔增加到8秒可以产生很好的效果。

非常顺畅。

- StrangeElement

---

请注意，使用CSS过渡效果需要CSS3支持，只有现代浏览器才支持。 - xorinzor

相当不错的创新，它有助于推广CSS3并“鼓励”使用糟糕浏览器的用户更新。 :-) - Daan

感谢您的指导，您需要添加.carousel .active.right来考虑从相册另一侧移动，但是感谢您给出正确的方向。 - Duncanmoo

它可以工作，但只有在转到下一个项目时...返回到上一个项目时，没有任何交叉淡入淡出的过渡。 - Primoz Rome

如果你的轮播图不完全是一张图片（例如，它包含没有图像背景的文本），请给.item添加一个背景颜色，否则淡入淡出效果可能不够平滑。 - Phil Gyford

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从“carousel slide”更改为“carousel fade”。这适用于Safari，Chrome，Firefox和IE 10。在IE 9中，它会正确降级，但是漂亮的面部效果不会发生。

编辑：由于此答案变得如此受欢迎，我已经添加了以下内容，它被重写为纯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;
}

- Robert McKee

---

我尝试了很多其他人都行的答案，但出于某种原因，只有这个对我有效。等我有时间时，我会进行调查... - Dan Ross

当然，我可以手动复制title属性的功能，这正是我所做的。我尝试将.item设置为display: none，并将.item.active设置为display: block，但这样会导致除第一张幻灯片外其他所有幻灯片都无法显示。 - Dan Ross

我已经编辑了上面的内容，添加了 z 索引，这应该解决您的标题问题。我注意到 Bootstrap 代码在尝试确定当前显示的幻灯片（导航点）时特别寻找 "slide" 类。它仍然可以工作，但对于淡入淡出效果，计时略有不同。它会立即将导航点更改为传入的导航点，而不是等待过渡效果完成，这样做我更喜欢。只是想指出这种奇怪的情况，以防它困扰您。 - Robert McKee

注意：这不像CSS，很可能是LESS，需要编译。 - Simon East

它似乎工作得很好，但是它立即消失了。我尝试改变时间，但似乎什么也没有发生。淡出时间几乎是瞬间的...我需要更平滑的效果。你能帮我吗？ - Crisan Raluca Teodora

Answer 3

可以的。Bootstrap使用CSS过渡效果，因此无需任何JavaScript即可轻松完成。 只需使用CSS3即可。请查看。

carousel.carousel-fade

以下示例的CSS：

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

- Jens A. Koch

---

不要忘记在.item类中添加“transform: none !important;”： .item { opacity: 0; transition-property: opacity; transform: none !important; } - goksel

Answer 4

在使用Bootstrap 3时遇到了这个问题。 我的解决方案是将carousel-fade类添加到轮播主DIV中，并将以下CSS插入到Bootstrap 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的过渡时间，但它们可能需要按比例调整，以保持效果看起来好。

- Raad

Answer 5

如果您正在使用Bootstrap 3.3.x，则使用以下代码（您需要将类名carousel-fade添加到您的轮播中）。

.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;
}

- Maverick

---

太棒了！这真正地淡入淡出图像，而不是删除非活动图像并仅滑入活动图像。点赞！ - Youp Bernoulli

Answer 6

注意：如果您正在使用Bootstrap + AngularJS + UI Bootstrap，则永远不会添加.left .right和.next类。使用以下链接中的示例和Robert McKee答案中的CSS即可解决。我想评论一下，因为找到完整的解决方案花了3天时间。希望这能帮助其他人！

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

以上链接是UI Bootstrap演示中的代码片段。

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();
  }
});

来自UI Bootstrap的HTML，注意我在示例中添加了.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上面的CSS

.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;
}

- phanf