Twitter Bootstrap Carousel插件能否在幻灯片过渡时淡入和淡出

68

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

我在github.com（https://github.com/twitter/bootstrap/issues/2050）上发现了此问题＃2050，这似乎暗示着这是不可能的。只是想看看它是否可能或已经完成。

jquery  twitter-bootstrap  carousel 
— 意见
source

Answers:

127

是。Bootstrap使用CSS过渡，因此无需任何Java脚本即可轻松完成。

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

很顺利

— 奇怪元素
source
4
请注意，使用CSS过渡需要CSS3，只有现代浏览器才支持CSS3
— xorinzor 2012年
4
相当不错的创新，它有助于推广CSS3，并通过笨拙的浏览器“鼓励”用户进行更新。:-)
— 大安
9
.carousel .active.right尽管需要正确的方向，但您需要添加帐户以其他方式在图库中移动。
— Duncanmoo 2012年
它有效，但仅当转到下一个项目时...返回上一个项目，没有任何淡入淡出过渡。
— Primoz罗马
如果您的旋转木马不完全是图像（即，它包含没有图像背景的文本），请给其.item提供背景色，或者溶解不完全平滑。
— Phil Gyford 2014年
75

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

.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。它将在IE 9中正确降级，但是不会出现漂亮的面部效果。

编辑：由于此答案变得如此流行，所以我添加了以下内容，将其改写为纯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;
}
— 罗伯特·麦基
source
2
我尝试了很多对很多人有用的答案，但是由于某种原因，这是唯一对我有用的答案。有时间的时候，我将不得不进行调查……
— 丹·罗斯
但是，这弄乱了幻灯片上的图像标题。并非所有图像display: none，因此.item无论.item当前显示哪个图像，鼠标都始终将鼠标悬停在最后一个图像上。CSS（> _ <）
— Dan Ross
1
当然，我可以title手动复制属性的功能，就像我刚才所做的那样。我试着设置.item到display: none和.item.active到display: block，但禁止所有但第一张幻灯片从不断显示。
— 丹·罗斯
3
我已经对上面的内容进行了编辑，以添加z-indexing，这应该可以解决您的标题问题。我注意到引导程序代码在尝试确定当前正在显示哪个幻灯片时会专门查找幻灯片类（导航点）。它仍然可以工作，但是淡入淡出的时序与滑动的时序有所不同。它将导航点立即更改为传入的导航点，而不是等待过渡效果完成，无论如何我都希望这样做。只是以为我会指出奇怪之处，以防它困扰您。
— 罗伯特·麦基
2
注意：这看起来不像CSS-可能很少，因此需要编译。
— 西蒙东
4

碰到这个问题用引导3.我的解决方案时，是把添加carousel-fade类至转盘主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过渡时间，但可能需要按比例进行调整以使效果看起来不错。

— 拉德
source
2

如果您使用的是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;
}
— 小牛
source
大！这实际上是淡入和淡出图像，而不是删除不活动的图像，而只是在活动图像中滑动。竖起大拇指！
— Bernoulli IT
0

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

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

以上链接中的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从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>

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;
}
— 潘芬
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.