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

时间:2012-03-02 01:56:55

标签: jquery twitter-bootstrap carousel

我在我正在处理的网站(http://furnitureroadshow.com/)上有一个非常基本的Twitter Bootstrap Carousel插件实现。我只是想知道是否有人扩展了Carousel插件,以便它在幻灯片转换中消失并淡出?

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

7 个答案:

答案 0 :(得分:127)

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

非常顺利。

答案 1 :(得分: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和IE 10.它将在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;
}

答案 2 :(得分:19)

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

carousel.carousel-fade

在以下示例的CSS中:

答案 3 :(得分:11)

这是我找到的最佳解决方案:

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

答案 4 :(得分: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过渡时间,但他们可能需要按比例调整以保持效果看起来不错。

答案 5 :(得分: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;
}

答案 6 :(得分: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();
  }
});

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

罗伯特麦基的答案上面的答案

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