Bootstrap轮播淡入不再与maxcdn 3.3.bootstrap.min.css一起使用 [英] Bootstrap carousel-fade no longer working with maxcdn 3.3.bootstrap.min.css

问题描述

我已经在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">，并且淡入淡出过渡不再起作用.它只是直接跳到下一张幻灯片.完全没有过渡.

I've had the fade transition working in a Bootstrap 3 build for a while now, but I just changed the call from a locally held copy of bootstrap.min.css (Bootstrap v3.1.1) to <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> and the the fade transition is no longer working. It just flips straight to the next slide. No transition at all.

我尝试添加轮播的ID，但这没有用.

I've tried adding the id of the carousel but that didn't work.

<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前面放#myCarousel时，它默认为幻灯片过渡.]

[BTW: When I put #myCarousel in front of those it defaults to the slide transition.]

您可以在此处使用maxcdn v3.3.0 CSS看到版本:bizharbour.net/projects/jambalaya/index.html

You can see a version here using the maxcdn v3.3.0 CSS here: bizharbour.net/projects/jambalaya/index.html

使用对本地保存的v3.1.1 css的调用的那个在这里:bizharbour.net/projects/jambalaya/crewed-yacht-charter-sample-menu.html该渐变正在起作用.

The one using the call to the locally held v3.1.1 css is here: bizharbour.net/projects/jambalaya/crewed-yacht-charter-sample-menu.htmlThe fade is working on this one.

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

One other thing I changed is the call to jquery and bootstrap js file. I'm now using:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">  </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

以前我使用的是:

<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script> 

本地bootstrap.js是v3.1.1，其中包括Bootstrap:transition.js v3.1.1(如果有的话).

The local bootstrap.js is v3.1.1 which includes Bootstrap: transition.js v3.1.1, if that means anything.

如何在Bootstrap 3.3.0中获取轮播，以识别轮播淡出过渡?

How do I get the carousel in Bootstrap 3.3.0 to recognise the carousel-fade transition?

感谢您的帮助.

干杯， 特雷西

推荐答案

我遇到了同样的问题，我想我有一个解决您需要的解决方案的方法.在3.3中，他们添加了CSS转换以改善现代浏览器中的轮播性能，因此您需要覆盖某些样式.告诉我它是否对您有用. :)

I faced the same problem and I think I have a solution for what you need. In 3.3 they added CSS transforms to improve carousel performance in modern browsers so you need to override some styles. Tell me if it worked for you. :)

-webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);

我在这里的解决方案: http://codepen.io/transportedman/pen/NPWRGq? editors = 110

My solution here: http://codepen.io/transportedman/pen/NPWRGq?editors=110

这篇关于Bootstrap轮播淡入不再与maxcdn 3.3.bootstrap.min.css一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！