Bootstrap carousel-fade 不再使用 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">
并且淡入淡出过渡不再有效.它只是直接翻到下一张幻灯片.完全没有过渡.
我曾尝试添加轮播的 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.html
The 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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
相关文章
- Bootstrap轮播淡入不再与maxcdn 3.3.bootstrap.min.css一起使用;
- Bootstrap MaxCDN 不工作?;
- Bootstrap carousel inside another bootstrap carousel;
- bootstrap.css和bootstrap.min.css之间有什么不同;
- bootstrap.min.css和bootstrap.css有什么区别?;
- 无法解析"../node_modules/bootstrap/dist/css/bootstrap.min.css"?;
- bootstrap.min.css 和 bootstrap.css 有什么区别?;
- bootstrap.css和bootstrap-combined.min.css有什么区别?;
- PHP与Bootstrap Carousel;
- Bootstrap Carousel没有回应;
- 包括bootstrap.min.css和bootstrap.css或只有一个?;
- Twitter Bootstrap Carousel IE问题;
- Twitter Bootstrap Carousel不滑动;
- Bootstrap 3 Carousel不工作;
- 更改 twitter bootstrap carousel 背景?;
- Bootstrap Carousel不会自动滑动;
- Bootstrap Carousel不起作用;
- Owl Carousel Not Showing On Bootstrap 5;
- 使用Jquery的Bootstrap 4 Dynamic Carousel;
- 在Bootstrap Carousel中使用JQuery Zoom;
- 使用ngx-bootstrap的Angular Carousel;
- 如何在Blazor中使用Bootstrap Carousel;
- Bootstrap modal:class =“modal fade”造成问题;
- Carousel sliding animation not working on Bootstrap 4.5.2;
- 更改Bootstrap 4 Carousel控件颜色;
前端开发最新文章
- 为什么Chrome(在Electron内部)突然重定向到chrome-error:// chromewebdata?;
- 错误102(net :: ERR_CONNECTION_REFUSED):服务器拒绝连接;
- 如何解决'重定向已被CORS策略阻止:没有'Access-Control-Allow-Origin'标题'?;
- 如何处理“Uncaught(in promise)DOMException:play()失败,因为用户没有首先与文档交互。”在桌面上使用Chrome 66?;
- 警告:添加非被动事件侦听器到滚动阻塞'touchstart'事件;
- 如何在浏览器中播放.TS文件(视频/ MP2T媒体类型)?;
- 此请求已被阻止;内容必须通过HTTPS提供;
- 资源解释为样式表,但转换为MIME类型text / html(似乎与web服务器无关);
- 通过HTTPS加载页面但请求不安全的XMLHttpRequest端点;
- 拒绝从执行脚本'*',因为它的MIME类型(“应用/ JSON')不是可执行文件,并严格MIME类型检查被启用。;