如何更改滑动动画以在 Bootstrap3 Carousel 上通过过渡淡入/淡出 [英] How can I change the sliding animation to fade in/out with transition on Bootstrap3 Carousel

问题描述

我试图将 bootstrap 3 carousel 的滑动效果更改为淡入/淡出.我按照这里给出的说明 Twitter Bootstrap Carousel 插件可以在幻灯片切换时淡入淡出吗

I was trying to change the sliding effect of bootstrap 3 carousel to fade in/out. I followed the instruction given here Can the Twitter Bootstrap Carousel plugin fade in and out on slide transition

css 代码(在链接中说)如下

the css code is (said in the link) below

.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，有人可以帮助我吗?提前感谢您的帮助.我是新来的，很抱歉我的英语很差，如果我问了一个愚蠢的问题！

My example link is at the end of of this pagragraph, I am making it but problem is the previous button isn't working perfectly, may be the solution is perfect for bootstrap2, I am using bootstrap3, can anybody help me? Advance Thanks for your help. I am new here, very sorry for my poor English and if I asked a stupid question!

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

推荐答案

试试这个轮播淡入淡出的例子.它将向您展示如何更改上一个和下一个按钮的不透明度.

Try this carousel fade example. It will show you how to change opacity for prev and next buttons.

.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

这篇关于如何更改滑动动画以在 Bootstrap3 Carousel 上通过过渡淡入/淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！