相关疑难解决方法(0)

我已经在Bootstrap 3版本中进行了淡入淡出转换一段时间了,但我刚刚将本地保存的bootstrap.min.css(Bootstrap v3.1.1)副本的调用更改为 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">并且淡入淡出过渡不再工作.它只是直接翻到下一张幻灯片.根本没有过渡.

我已经尝试添加旋转木马的ID,但这不起作用.

<div id="myCarousel" class="carousel carousel-fade slide " data-ride="carousel">
        <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
    <li data-target="#myCarousel" data-slide-to="4"></li>
    </ol>

等等

CSS是:

.carousel-fade .item {
-webkit-transition: opacity 3s; 
-moz-transition: opacity 3s; 
-ms-transition: opacity 3s; 
-o-transition: opacity 3s; 
transition: opacity 3s;
}
.carousel-fade .active.left {left:0;opacity:0;z-index:2;}
.carousel-fade .next {left:0;opacity:1;z-index:1;}

[顺便说一句:当我把#myCarousel放在那些前面时,它默认为幻灯片过渡.]

你可以在这里看到一个使用maxcdn v3.3.0 CSS的版本: bizharbour.net/projects/jambalaya/index.html

使用对本地持有的v3.1.1 css的调用的人在这里:bizharbour.net/projects/jambalaya/crewed-yacht-charter-sample-menu.html淡入淡出正在处理这个.

我改变的另一件事是调用jquery和bootstrap js文件.我现在正在使用:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">  </script> …

在过去的3个小时里,我一直试图对Bootstrap 3的旋转木马过渡进行简单的调整.我试过改变滑动速度,这是唯一似乎有效的东西:

.carousel-inner .item {
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
}

但是它太快隐藏了"离开"内容,我不知道要修改哪些属性来解决这个问题.

我也尝试过将它改成淡入淡出过渡

.carousel-fade .item {
  opacity: 0;
  -webkit-transition: opacity 2s ease-in-out;
  -moz-transition: opacity 2s ease-in-out;
  -ms-transition: opacity 2s ease-in-out;
  -o-transition: opacity 2s ease-in-out;
  transition: opacity 2s ease-in-out;
  left: 0 !important;
}

.carousel-fade .active {
  opacity: 1 !important;
}

.carousel-fade .left {
  opacity: 0 !important;
  -webkit-transition: opacity 0.5s ease-in-out !important;
  -moz-transition: opacity 0.5s ease-in-out !important;
  -ms-transition: opacity 0.5s ease-in-out !important;
  -o-transition: opacity 0.5s ease-in-out !important;
  transition: opacity …