Twitter引导旋转木马插件是否会在幻灯片转换中淡出或淡出

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?

我有一个非常基本的Twitter引导Carousel插件的实现，我正在一个网站上工作(http://furniture ureroadshow.com/)。我想知道是否有人扩展了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上发现了这个问题#2050 (https://github.com/twitter/bootstrap/issues/ issues/2050)，这似乎表明在这个时候，这是不可能的。我只是想看看是否可以或者已经完成了。

8 个解决方案

#1

127

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.

但我注意到，过渡端事件过早地使用了5s的默认间隔和3秒的渐变过渡。把旋转木马的间隔增加到8s会产生很好的效果。

Very smooth.

非常光滑。

#2

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，而不是更少的:

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

#3

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://jsfiddle.net/seemly/ww67B/123/
http://bootply.com/86170
http://bootply.com/86170
http://codepen.io/Rowno/pen/Afykb
http://codepen.io/Rowno/pen/Afykb

#4

This is the best solution that I found:

这是我找到的最好的解决办法:

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

#5

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

在使用Bootstrap 3时遇到了这个问题。我的解决方案是将carousel-fade类添加到carousel main DIV中，并在包含引导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).

引导所应用的样式转换意味着您必须快速地进行跨中转换(活动的左，下一个左)，否则项目最终会消失(因此需要1/2秒的转换时间)。

I haven't experimented with adjusting the .item and .left transition times, but they will probably need adjusting proportionally to keep the effect looking nice.

我还没有尝试过调整。item和。left转换时间，但是它们可能需要按比例调整以保持效果良好。

#6

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。然后使用此代码(您需要将类名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;
}

#7

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回答是有效的。我想评论一下，因为我花了三天时间才找到一个完整的解决方案。希望这可以帮助别人!

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

https://angular-ui.github.io/bootstrap/ /旋转木马

Code snip from UI Bootstrap Demo at the above link.

在上面的链接上，从UI引导演示中进行代码裁剪。

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, Notice I added the .fade class to the example.

从UI引导的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>

CSS from Robert McKee's answer above

以上是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;
}

#8

For Bootstrap 3.3.6. - any answer posted above didn't help me for every browser (especially experienced a lot of problems in Firefox). Hope this help someone.

为引导3.3.6。-上面的任何回答都不能帮助我解决所有浏览器的问题(尤其是在Firefox中遇到了很多问题)。希望这帮助别人。

Just add class carousel-fade like this:

只需添加class carouselor -fade:

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

and add this code to your css:

并将此代码添加到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;
 }

#1

127