如何在Bootstrap3 Carousel上通过转换将滑动动画更改为淡入/淡出

我试图改变bootstrap 3轮播的滑动效果淡入/淡出。 我按照这里给出的说明进行了Twitter Bootstrap Carousel插件在幻灯片转换时淡入淡出

下面是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; } 

我的示例链接是在这个图的最后，我正在制作但问题是前一个按钮不能正常工作，可能解决方案是完美的bootstrap2，我使用bootstrap3，任何人都可以帮助我吗？ 预先感谢您的帮助。 我是新来的，非常抱歉我的英语不好，如果我问了一个愚蠢的问题！

https://dl.dropboxusercontent.com/u/35758776/xenxbd/contrastic/index.html#parallux-wrapper-04

Answer 1

试试这个旋转木马淡出的例子。 它将向您展示如何更改prev和next按钮的不透明度。

 .carousel-fade .carousel-inner .item { opacity: 0; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; } .carousel-fade .carousel-inner .active { opacity: 1; } .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; } .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-control { z-index: 2; } 

http://bootply.com/86170

Answer 2

在您的轮播中添加“.carousel-fade”类。 CSS：

 .carousel-fade .active.left { left:0; opacity:0; -webkit-transition: opacity 1s; /*time < to $.carousel.interval setup */ -moz-transition: opacity 1s; -ms-transition: opacity1s; -o-transition: opacity 1s; transition: opacity 1s; z-index:2; } .carousel-fade .next { left:0; opacity:1; z-index:1; }