Bootstrap carousel-fade 不再使用 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"> 并且淡入淡出过渡不再有效.它只是直接翻到下一张幻灯片.完全没有过渡.

我曾尝试添加轮播的 ID，但没有奏效.

<!-- 指标--><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:不透明度 3s；-moz-transition: 不透明度 3s;-ms-transition: 不透明度 3s;-o-transition: 不透明度 3s;过渡:不透明度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://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

以前我使用的是:

<script src="js/bootstrap.js"></script>

本地 bootstrap.js 是 v3.1.1，其中包括 Bootstrap:transition.js v3.1.1，如果这意味着什么.

如何让 Bootstrap 3.3.0 中的 carousel 识别 carousel-fade 过渡?

感谢您的帮助.

干杯，特蕾西

解决方案

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

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

我的解决方案:http://codepen.io/transportedman/pen/NPWRGq?编辑=110

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.

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>

etc.

The CSS is:

.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;}

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

You can see a version here using the maxcdn v3.3.0 CSS here: bizharbour.net/projects/jambalaya/index.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.

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>

Previously I was using:

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

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

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

Thanks for any help.

Cheers,Tracy

解决方案

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);

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

这篇关于Bootstrap carousel-fade 不再使用 maxcdn 3.3.bootstrap.min.css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！