jQuery Twitter Bootstrap Carousel 插件可以在幻灯片切换时淡入淡出吗

Can the Twitter Bootstrap Carousel plugin fade in and out on slide transition

提问by generalopinion

I have a very basic implementation of the Twitter Bootstrap Carousel plugin on a site that I am working on (http://furnitureroadshow.com/). I was just wondering if anyone had extended the Carousel plugin so that it fades in and fades out on slide transition?

我在我正在工作的网站 ( http://furnitureroadshow.com/)上有一个非常基本的 Twitter Bootstrap Carousel 插件实现。我只是想知道是否有人扩展了 Carousel 插件，使其在幻灯片过渡时淡入淡出？

I found this issue #2050 on github.com (https://github.com/twitter/bootstrap/issues/2050) that seems to suggest that at this point, it isn't possible. Just wanted to see if it could be or has been done.

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

回答by StrangeElement

Yes. Bootstrap uses CSS transitions so it can be done easily without any Javascript.

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

The CSS:

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

I noticed however that the transition end event was firing prematurely with the default interval of 5s and a fade transition of 3s. Bumping the carousel interval to 8s provides a nice effect.

然而，我注意到过渡结束事件过早地触发，默认间隔为 5 秒，淡入淡出过渡为 3 秒。将轮播间隔设置为 8 秒可提供不错的效果。

Very smooth.

很流畅。

回答by Robert McKee

Yes. Although I use the following code.

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

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

Then change the class on the carousel from "carousel slide" to "carousel fade". This works in safari, chrome, firefox, and IE 10. It will correctly downgrade in IE 9, however, the nice face effect doesn't happen.

然后将轮播上的类从“轮播幻灯片”更改为“轮播淡出”。这适用于 safari、chrome、firefox 和 IE 10。它会在 IE 9 中正确降级，但是，漂亮的脸效果不会发生。

Edit: Since this answer has gotten so popular I've added the following which rewritten as pure CSS instead of the above which was LESS:

编辑：由于这个答案变得如此流行，我添加了以下内容，将其重写为纯 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;
}

回答by Jens A. Koch

Yes. Bootstrap uses CSS transitions so it can be done easily without any Javascript. Just use CSS3. Please take a look at

是的。Bootstrap 使用 CSS 转换，因此无需任何 Javascript 即可轻松完成。只需使用CSS3。请看一下

carousel.carousel-fade

in the CSS of the following examples:

在以下示例的 CSS 中：

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

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

回答by Mike Stumpf

This is the best solution that I found:

这是我发现的最佳解决方案：

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

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

回答by Raad

Came across this issue when using Bootstrap 3. My solution was to add the carousel-fadeclass to the carousel main DIV and slot the following CSS in, somewhere afterthe Bootstrap CSS is included:

使用 Bootstrap 3 时遇到了这个问题。我的解决方案是将carousel-fade类添加到轮播主 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;
}

The style transitions that Bootstrap applies mean that you have to have the mid-stride transitions (active left, next left) quickly, otherwise the item just ends up disappearing (hence the 1/2 second transition time).

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

I haven't experimented with adjusting the .itemand .lefttransition times, but they will probably need adjusting proportionally to keep the effect looking nice.

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

回答by Maverick

If you are using Bootstrap 3.3.x then use this code (you need to add class name carousel-fade to your carousel).

如果您使用的是 Bootstrap 3.3.x，请使用此代码（您需要将类名 carousel-fade 添加到您的 carousel）。

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

回答by phanf

Note: If you are using Bootstrap + AngularJS + UI Bootstrap, .left .right and .next classes are never added. Using the example at the following link and the CSS from Robert McKee answer works. I wanted to comment because it took 3 days to find a full solution. Hope this helps others!

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

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

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

Code snip from UI Bootstrap Demo at the above link.

来自上面链接的 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 From UI Bootstrap, NoticeI added the .fade class to the example.

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>

CSS from Robert McKee's answer above

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