Jquery 推特引导旋转木马插件能否在幻灯片转换时淡入淡出

我在一个我正在开发的站点（）上实现了一个非常基本的Twitter引导Carousel插件。我只是想知道是否有人扩展了旋转木马插件，使其在幻灯片转换时淡入淡出

---

我在github.com（）上发现了这个问题#2050，这似乎表明在这一点上，这是不可能的。我只是想看看它是否能够或已经完成。

是的。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秒可以提供很好的效果

---

非常光滑。

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

carousel.carousel-fade

在以下示例的CSS中：

是的。 尽管我使用以下代码

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

然后将传送带上的类别从“传送带幻灯片”更改为“传送带淡入淡出”。这适用于safari、chrome、firefox和IE10。在IE9中，它会正确地降级，但是，漂亮的脸效果不会发生
编辑：由于这个答案变得如此流行，我添加了以下内容，这些内容被改写为纯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;
}

---

在使用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;
}

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

---

我还没有尝试过调整

.item

和

.left

转换时间，但它们可能需要按比例进行调整，以保持效果良好。
注意：如果使用Bootstrap+AngularJS+UI Bootstrap，.left.right和.next类，则永远不会添加。使用下面链接中的示例和Robert McKee answer中的CSS可以工作。我想发表评论，因为花了3天时间才找到完整的解决方案。希望这能帮助别人
从上面链接的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();
  }
});

---

如果您使用的是Bootstrap 3.3.x，那么请使用以下代码 （您需要将类名carousel fade添加到您的carousel中）

---

请注意，使用css转换需要CSS3，而只有现代浏览器才支持相当好的创新，它有助于提升CSS3，并“鼓励”使用蹩脚浏览器的用户进行更新。：-）您需要添加

.carousel.active.right

，以说明在库中以另一种方式移动，但感谢您提供了正确的方向。它可以工作，但仅在转到下一个项目时有效。。。返回到上一个项目，没有任何交叉淡入过渡。如果您的旋转木马不完全是图像（即，它包含没有图像背景的文本），请为

。项目

添加背景色，否则溶解不太平滑。我尝试了许多其他答案，这些答案对很多人都适用，但出于某种原因，这是唯一一个对我有用的。当我有时间的时候，我将不得不调查……但是，这会把幻灯片上的图像标题弄乱；所有图像都不是

显示：无

，因此无论当前显示哪个

。项目

，鼠标始终悬停在最后一个

。项目

。CSS（>\u当然，我可以手动复制

title

属性的功能，我刚刚这么做了。我尝试将

.item

设置为

display:none

和

.item.active

设置为

display:block

，但除了第一张幻灯片外，其他所有幻灯片都无法显示。我编辑了上面的内容，添加了z索引，它可以应该可以解决标题问题。我注意到引导代码在试图确定当前显示的幻灯片（导航点）时专门查找幻灯片类。它仍然有效，但淡入淡出的时间与幻灯片的时间有点不同。它会立即将导航点更改为传入的导航点，而不是等待过渡效果完成，我更喜欢这种效果。我只是想指出一些奇怪的地方，以防它困扰你。注意：这看起来不像CSS，可能不太需要编译。不要这样做忘记将“transform:none！important；”添加到.item类：。item{opacity:0；transition属性：opacity；transform:none！important；}太好了！这确实会淡入淡出图像，而不是删除非活动图像，只会在活动图像中滑动。竖起大拇指！

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

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

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