淡入淡出 bootstrap 滑块

Question

我正在尝试让我的 bootstrap 滑块在更改幻灯片时淡出，如下所示 this template.。我在 asp.net 中使用 visual 2010。现在的问题是，当图像发生变化时，它不会发生轻微变化，在第二张图像出现之前，灰色背景会出现不到一秒钟。我现在真的不知道这里发生了什么......我正在使用 bootstrap 3.3.7，下面是我的代码：

<style type="text/css">
.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;
            }     
  </style>   
</head>
<body>
<div id="Carousel" class="carousel slide carousel-fade">
        <ol class="carousel-indicators">
            <li data-target="Carousel" data-slide-to="0" class="active"></li>
            <li data-target="Carousel" data-slide-to="1"></li>
            <li data-target="Carousel" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner">
            <div class="item active">
                <img src="../Images/ImageE_Beta.jpg" class="img-responsive"/>
            </div>
           <div class="item">
             <img src="../Images/ImageE_Beta.jpg" class="img-responsive"/>
            </div>
           <div class="item">
             <img src="../Images/ImageE_Beta.jpg" class="img-responsive"/>
            </div>
        </div>

        <a class="left carousel-control" href="#Carousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#Carousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
</div>
</body>

有什么提示吗？

更新

现在我把<div id="Carousel" class="carousel slide carousel-fade">改成了 <div id="Carousel" style="background-color:red" class="carousel slide carousel-fade"> 两个图像之间出现的颜色是红色的。

Answer 1

我的提示是使用 "transition-duration" 标签等。你应该阅读一些关于如何创建滑块的页面，它们已经足够了。

但实际上我的提示是至少要设置过渡持续时间，因为现在它是标准的 0 秒。

这可能不起作用的另外几个原因：

你有 style 个标签，但你甚至加载 bootstrap 吗？没有"style include".

或者这可能已经过时了。你可以看到滑块的上传器已被否决，因此它可能无法工作

希望对您有所帮助。

Answer 2

最后我可以通过删除块来解决问题：@media all and (transform-3d), (-webkit-transform-3d) 特定于 carousel-inner。

淡入淡出 bootstrap 滑块

Fade in out bootstrap slider

html

css

slider

fadeout

twitter-bootstrap