Question

我正在尝试让我的引导滑块在更改幻灯片时淡出 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

我的提示是使用＆＃34;转换持续时间＆＃34;标签等。你应该阅读一些关于如何创建滑块的页面。

但实际上我的提示是将过渡时间至少设置为现在的标准0秒。

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

你有style标签，但是你甚至加载到引导程序中？没有＆＃34;风格包括＆＃34;。

或许这已经过时了。你可以看到滑块的上传器已被downvoted所以它可能无法正常工作

希望这有帮助。

Answer 2

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

淡出自举滑块

2 个答案: