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

Question

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

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

Answer 1

是.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秒.将轮播间隔转换为8s可提供良好的效果.

很顺利.

Answer 2

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

.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而不是上面的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;
}

Answer 3

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

carousel.carousel-fade

在以下示例的CSS中:

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

Answer 4

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

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