带褪色+滑动的引导旋转木马幻灯片
Bootstrap carousel slide with fading+sliding
我一直在引导轮播上挣扎了几天，它应该像默认的那样向左/向右滑动，但随着淡入（新项目在进入时缓慢获得不透明度，而上一个项目在移出时慢慢失去不透明度），我尝试了很多变体，但其中一些在 Firefox 中不起作用，其他在 opera 等中不断失败。
这是 HTML：
<section>
<div class="container">
<h2>Some title</h2>
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
<p>Some text</p>
<div class="ingo col-sm-8 col-sm-offset-2">
<div id="pubCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="foto" src="{{'assets/img/some-image.jpg'|theme }}"/>
<h3 class="name longn">Carousel text</h3>
</div>
<div class="item">
<img class="foto" src="{{'assets/img/some-image.jpg'|theme }}"/>
<h3 class="name">Carousel text</h3>
</div>
</div>
<div class="pub-counter">
<p class="counter-line"></p>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#pubCarousel" role="button" data-slide="prev">
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#pubCarousel" role="button" data-slide="next">
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
设置不起作用（我知道现在很糟糕，我尝试了 10 种解决方案，但无论如何都不起作用），轮播的其余部分是默认的：
.ingo .carousel-inner>.item {
-webkit-transition: -webkit-transform 1s ease-in-out, opacity 2s ease-in-out;
-moz-transition: -moz-transform 1s ease-in-out, opacity .5s ease-in-out;
-o-transition: -o-transform 1s ease-in-out, opacity 2s ease-in-out;
transition: transform 1s ease-in-out, opacity 2s ease-in-out;
}
.ingo .carousel-inner>.item.active,.ingo .carousel-inner>.item.active {
-webkit-transition: -webkit-transform 1s ease-in-out, opacity .5s ease-in-out;
-moz-transition: -moz-transform 1s ease-in-out, opacity .5s ease-in-out;
-o-transition: -o-transform 1s ease-in-out, opacity .5s ease-in-out;
transition: transform 1s ease-in-out, opacity 2s ease-in-out;
}
.ingo .carousel .item {
opacity:0;
}
.ingo .carousel .carousel-inner .active {
opacity: 1;
}
.ingo .carousel .carousel-inner .next,
.ingo .carousel .carousel-inner .prev
.ingo .carousel .carousel-inner .active.left,
.ingo .carousel .carousel-inner .active.right {
left: 0;
opacity: 0;
}
.ingo .carousel .carousel-inner .next.left,
.ingo .carousel .carousel-inner .prev.right {
opacity: 1;
}
我没有使用任何JS修改。我希望这个答案不会重复一些已经发布的问题，我只是找不到解决方案。
感谢所有的帮助，非常感谢。
sitepoint上的本教程应该可以帮助您： http://www.sitepoint.com/bootstrap-carousel-with-css3-animations/
Animate.css是非常好的CSS3库，我在许多项目中使用它来"增添趣味"。
经过一番挣扎，我终于设法获得了幻灯片+淡入淡出效果，我还发现了这个 Stackoverflow 主题 Twitter Bootstrap 轮播插件可以在幻灯片过渡时淡入淡出吗，但任何发布的解决方案都不适用于每个浏览器 - 尤其是 Firefox 做了很多麻烦。所以有一个解决方案。希望这对某人有所帮助。
.ingo .carousel .carousel-inner .item {
-webkit-transition: all 1.1s ease-in-out, opacity 1s ease-in;
-moz-transition: all 1.1s ease-in-out, opacity 1s ease-in;
-ms-transition: all 1.1s ease-in-out, opacity 1s ease-in;
-o-transition: all 1.1s ease-in-out, opacity 1s ease-in;
transition: all 1.1s ease-in-out, opacity 1s ease-in;
}
.ingo .carousel .carousel-inner .item,
.ingo .carousel .carousel-inner .active.left,
.ingo .carousel .carousel-inner .active.right {
opacity: 0 !important;
}
.ingo .carousel .carousel-inner .active,
.ingo .carousel .carousel-inner .next.left,
.ingo .carousel .carousel-inner .prev.right {
opacity: 1 !important;
}
.#pubCarousel.carousel .carousel-control {
z-index: 2 !important;
}
试试这个并检查示例代码 这里
.carousel-caption{
padding-bottom:100px;
}
.rw-words-1 span{
position: absolute;
opacity: 0;
overflow: hidden;
color: #f65a3a;
font-weight:400 !important;
-webkit-animation: rotateWord 18s linear infinite 0s;
-ms-animation: rotateWord 18s linear infinite 0s;
animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
color: #0d9b56;
}
.rw-words-1 span:nth-child(3) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
color: #f65a3a;
}
.rw-words-1 span:nth-child(4) {
-webkit-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
color:#0d9b56;
}
@-webkit-keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -webkit-transform: translateY(-30px); }
5% { opacity: 1; -webkit-transform: translateY(0px);}
17% { opacity: 1; -webkit-transform: translateY(0px); }
20% { opacity: 0; -webkit-transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -ms-transform: translateY(-30px); }
5% { opacity: 1; -ms-transform: translateY(0px);}
17% { opacity: 1; -ms-transform: translateY(0px); }
20% { opacity: 0; -ms-transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); }
5% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);}
17% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); }
20% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
.rw-words{
display: inline;
text-indent: 10px;
}
.agileits-banner-info span {
color: #fff;
font-size: 28px;
letter-spacing: 3px;
font-weight: 700;
text-align: left !important;
}
.agileits_w3layouts_more a {
font-size: 1.1em;
color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
background:#0d9b56;
padding: .7em 2em;
display: inline-block;
margin-top: 40px;
border-radius:2px;
}
.agileits_w3layouts_more a:focus{
outline:none;
}
.agileits_w3layouts_more a:hover{
background:#f65a3a;
}
.agileits_w3layouts_more.menu__item {
text-align: center;
}
.carousel-fade .carousel-inner .item {
opacity: 0;
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;
}
/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-fade .carousel-inner > .item.next,
.carousel-fade .carousel-inner > .item.active.right {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.prev,
.carousel-fade .carousel-inner > .item.active.left {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.next.left,
.carousel-fade .carousel-inner > .item.prev.right,
.carousel-fade .carousel-inner > .item.active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="4500">
<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>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://www.script-tutorials.com/demos/284/images/pic1.jpg" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<div class="agileits-banner-info bannertext-desktop">
<span>A Powerful But Simple Way to Manage Your </span>
<div class="rw-words rw-words-1">
<span>Company</span>
<span> People</span>
<span>Happiness</span>
<span>Wonder</span>
</div>
<div class="agileits_w3layouts_more menu__item">
<a href="#" class="menu__link" data-toggle="modal" data-target="#myModal">Learn More</a>
</div>
</div>
</div>
</div>
<div class="item">
<img src="http://www.script-tutorials.com/demos/284/images/pic2.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<div class="agileits-banner-info bannertext-desktop">
<span>A Powerful But Simple Way to Manage Your </span>
<div class="rw-words rw-words-1">
<span>Company</span>
<span> People</span>
<span>Happiness</span>
<span>Wonder</span>
</div>
<div class="agileits_w3layouts_more menu__item">
<a href="#" class="menu__link" data-toggle="modal" data-target="#myModal">Learn More</a>
</div>
</div>
</div>
</div>
<div class="item">
<img src="http://www.script-tutorials.com/demos/284/images/pic3.jpg" alt="New York" style="width:100%;">
<div class="carousel-caption">
<div class="agileits-banner-info bannertext-desktop">
<span>A Powerful But Simple Way to Manage Your </span>
<div class="rw-words rw-words-1">
<span>Company</span>
<span> People</span>
<span>Happiness</span>
<span>Wonder</span>
</div>
<div class="agileits_w3layouts_more menu__item">
<a href="#" class="menu__link" data-toggle="modal" data-target="#myModal">Learn More</a>
</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>相关文章：
- 结束时停止推特引导旋转木马's幻灯片
- Bootstrap 3 旋转木马白色背景滑动时滑动下方的幻灯片
- 带褪色+滑动的引导旋转木马幻灯片
- 光滑的旋转木马如何将当前幻灯片作为 dom 或 jquery 对象获取
- OWL旋转木马移动+/-5张幻灯片
- 奇怪的引导程序旋转木马问题.第一张幻灯片最初没有加载
- 从引导程序旋转木马中的特定幻灯片开始
- 在基于DOM元素而非索引的引导旋转木马中跳到另一张幻灯片
- Angular Js需要多幻灯片旋转木马
- jQuery文本大小调整插件只适用于第一张幻灯片的引导旋转木马
- 如何去特定的幻灯片在左边雪佛龙点击引导旋转木马，而不是直接去上一张幻灯片
- Bxslider将next按钮绑定到旋转木马中的下一张幻灯片
- 引导旋转木马-如何得到计数幻灯片
- Bootstrap 3旋转木马显示空白幻灯片在结束
- 带分页的引导旋转木马-当使用旋转木马控件时，当前幻灯片在导航中不活动
- 在角度引导旋转木马上设置活动幻灯片
- 圆滑的旋转木马隐藏最后一张幻灯片期间调整大小，圆滑的goto不工作如预期
- 将CSS应用于旋转木马幻灯片上的另一个span
- 推特引导旋转木马幻灯片与js代码
- 添加效果的引导旋转木马幻灯片
