本文介绍了Bootstrap 3 Carousel 淡入新幻灯片而不是滑动到新幻灯片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用的是 Bootstrap 3，未经修改.
这里
我使用的是 Bootstrap 3，未经修改.
这里
<div class="item carousel-2"><div class="容器"><div class="carousel-caption"><h1>另一个标题示例.</h1><p>Cras justo odio, dapibus ac facilis in, egestas eget quam.Donec id elit non mi porta gravida at eget metus.Nullam id dolor id nibh ultricies vehicula ut id elit.</p><p><a class="btn btn-large btn-primary" href="#">了解详情</a></p>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>;</div><!--/.carousel -->
来自引导程序 3 的默认 css:
.carousel {位置:相对；}.carousel-内{位置:相对；宽度:100%；溢出:隐藏；}.carousel-inner >.物品 {位置:相对；显示:无；-webkit-transition:0.6s 缓入缓出；过渡:0.6 秒缓入缓出；}.carousel-inner >.item >图像，.carousel-inner >.item >＞图像{显示:块；高度:自动；最大宽度:100%；行高:1；}.carousel-inner >.积极的，.carousel-inner >.下一个，.carousel-inner >.prev {显示:块；}.carousel-inner >.积极的 {左:0；}.carousel-inner >.下一个，.carousel-inner >.prev {位置:绝对；顶部:0；宽度:100%；}.carousel-inner >.下一个 {左:100%；}.carousel-inner >.prev {左:-100%；}.carousel-inner >.next.left,.carousel-inner >.prev.right {左:0；}.carousel-inner >.active.left {左:-100%；}.carousel-inner >.active.right {左:100%；}.carousel-control {位置:绝对；顶部:0；底部:0；左:0；宽度:15%；字体大小:20px；颜色:#ffffff；文本对齐:居中；文本阴影:0 1px 2px rgba(0, 0, 0, 0.6);不透明度:0.5；过滤器:阿尔法(不透明度= 50)；}.carousel-control.left {背景图像:-webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));背景图像:-webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));背景图像:-moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);背景图像:线性渐变(向右，rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%)；背景重复:重复-x；过滤器:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);}.carousel-control.right {右:0；左:自动；背景图像:-webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5)));背景图像:-webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0), color-stop(rgba(0, 0, 0, 0.5) 100%));背景图像:-moz-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);背景图像:线性渐变(向右，rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%)；背景重复:重复-x；过滤器:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);}.carousel-control:hover,.carousel-control:focus {颜色:#ffffff；文字装饰:无；不透明度:0.9；过滤器:阿尔法(不透明度= 90)；}.carousel-control .icon-prev,.carousel-control .icon-next,.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right {位置:绝对；顶部:50%；左:50%；z-索引:5；显示:内联块；}.carousel-control .icon-prev,.carousel-control .icon-next {宽度:20px；高度:20px；边距顶部:-10px；左边距:-10px；字体系列:衬线；}.carousel-control .icon-prev:before {内容:'\2039';}.carousel-control .icon-next:before {内容:'\203a';}.carousel-indicators {位置:绝对；底部:10px；左:50%；z-索引:15；宽度:60%；填充左:0;左边距:-30%；文本对齐:居中；列表样式:无；}.carousel-indicators li {显示:内联块；宽度:10px；高度:10px；边距:1px；文本缩进:-999px；光标:指针；边框:1px 实心 #ffffff；边框半径:10px；}.carousel-indicators .active {宽度:12px；高度:12px；边距:0；背景色:#ffffff；}.carousel-caption {位置:绝对；正确:15%；底部:20px；左:15%；z-索引:10；填充顶部:20px；填充底部:20px；颜色:#ffffff；文本对齐:居中；文本阴影:0 1px 2px rgba(0, 0, 0, 0.6);}.carousel-caption .btn {文字阴影:无；}@media 屏幕和(最小宽度:768px){.carousel-control .icon-prev,.carousel-control .icon-next {宽度:30px；高度:30px；边距顶部:-15px；左边距:-15px；字体大小:30px；}.carousel-caption {正确:20%；左:20%；填充底部:30px；}.carousel-indicators {底部:20px；}}我添加的一些 css:
.carousel {高度:500px；}.carousel-内{高度:100%；}.carousel-1 {高度:100%；背景:url(../images/carousel1.jpg) 无重复中心中心固定；-webkit-background-size: 封面；背景尺寸:封面；}.carousel-2 {高度:100%；背景:url(../images/carousel2.jpg) 无重复中心固定；-webkit-background-size: 封面；背景尺寸:封面；}但我不知道如何让这个带有褪色效果的旋转木马.我试图在活动项目时将不透明度从 1 更改为 0，但它制作了 2 个动画，它向左滑动并更改了不透明度..
你能帮我吗?
由于更改，从 3.2.x 到 3.3.x 的更新破坏了此处和其他线程上解释的一些解决方案:添加了转换为提高现代浏览器中的轮播性能."
如果您使用的是 Bootstrap 3.3.x，这里有一个解决方案:
http://codepen.io/transportedman/pen/NPWRGq
基本上，您需要将carousel-fade"类添加到您的轮播中，以便您:
然后包含以下 CSS:
/*Bootstrap 轮播淡入淡出过渡(适用于 Bootstrap 3.3.x)CSS 来自:http://codepen.io/transportedman/pen/NPWRGq和:http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide灵感来自:http://codepen.io/Rowno/pen/Afykb*/.carousel-fade .carousel-inner .item {不透明度:0；过渡属性:不透明度；}.carousel-fade .carousel-inner .active {不透明度:1；}.carousel-fade .carousel-inner .active.left,.carousel-fade .carousel-inner .active.right {左:0；不透明度:0；z-索引:1；}.carousel-fade .carousel-inner .next.left,.carousel-fade .carousel-inner .prev.right {不透明度:1；}.carousel-fade .carousel-control {z-索引:2；}/*3.3 中的新功能:添加了转换以提高现代浏览器中的轮播性能."需要覆盖现代浏览器的 3.3 新样式 &应用不透明度*/@media all 和 (transform-3d), (-webkit-transform-3d) {.carousel-fade .carousel-inner >.item.next,.carousel-fade .carousel-inner >.item.active.right {不透明度:0；-webkit-transform: translate3d(0, 0, 0);变换:translate3d(0, 0, 0);}.carousel-fade .carousel-inner >.item.prev,.carousel-fade .carousel-inner >.item.active.left {不透明度:0；-webkit-transform: translate3d(0, 0, 0);变换:translate3d(0, 0, 0);}.carousel-fade .carousel-inner >.item.next.left,.carousel-fade .carousel-inner >.item.prev.right,.carousel-fade .carousel-inner >.item.active {不透明度:1；-webkit-transform: translate3d(0, 0, 0);变换:translate3d(0, 0, 0);}}I am using Bootstrap 3, unmodified.
Here's
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<!-- 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>
</ol>
<div class="carousel-inner">
<div class="item active carousel-1">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-large btn-primary" href="#">Sign up today</a></p>
</div>
</div>
</div>
<div class="item carousel-2">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.carousel -->
default css from bootstrap 3:
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-inner > .item {
position: relative;
display: none;
-webkit-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
height: auto;
max-width: 100%;
line-height: 1;
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
display: block;
}
.carousel-inner > .active {
left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel-inner > .next {
left: 100%;
}
.carousel-inner > .prev {
left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
left: 0;
}
.carousel-inner > .active.left {
left: -100%;
}
.carousel-inner > .active.right {
left: 100%;
}
.carousel-control {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 15%;
font-size: 20px;
color: #ffffff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
opacity: 0.5;
filter: alpha(opacity=50);
}
.carousel-control.left {
background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.carousel-control.right {
right: 0;
left: auto;
background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5)));
background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0), color-stop(rgba(0, 0, 0, 0.5) 100%));
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}
.carousel-control:hover,
.carousel-control:focus {
color: #ffffff;
text-decoration: none;
opacity: 0.9;
filter: alpha(opacity=90);
}
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
position: absolute;
top: 50%;
left: 50%;
z-index: 5;
display: inline-block;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
font-family: serif;
}
.carousel-control .icon-prev:before {
content: '\2039';
}
.carousel-control .icon-next:before {
content: '\203a';
}
.carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 15;
width: 60%;
padding-left: 0;
margin-left: -30%;
text-align: center;
list-style: none;
}
.carousel-indicators li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
cursor: pointer;
border: 1px solid #ffffff;
border-radius: 10px;
}
.carousel-indicators .active {
width: 12px;
height: 12px;
margin: 0;
background-color: #ffffff;
}
.carousel-caption {
position: absolute;
right: 15%;
bottom: 20px;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #ffffff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-caption .btn {
text-shadow: none;
}
@media screen and (min-width: 768px) {
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: -15px;
font-size: 30px;
}
.carousel-caption {
right: 20%;
left: 20%;
padding-bottom: 30px;
}
.carousel-indicators {
bottom: 20px;
}
}
some css that I've added:
.carousel {
height: 500px;
}
.carousel-inner {
height: 100%;
}
.carousel-1 {
height: 100%;
background: url(../images/carousel1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
background-size: cover;
}
.carousel-2 {
height: 100%;
background: url(../images/carousel2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
background-size: cover;
}
but I can't figure out how I can this carousel with fading effect.I tried to change opacity from 1 to 0, when active item, but it makes 2 animations, it slides left and changes opacity too..
Can you help me?
The update from 3.2.x to 3.3.x broke some of the solutions explained here and on other threads because of the change: "Added transforms to improve carousel performance in modern browsers."
If you are using Bootstrap 3.3.x there's a solution here:
http://codepen.io/transportedman/pen/NPWRGq
Basically you need to add the "carousel-fade" class to your carousel so that you have:
<div class="carousel slide carousel-fade">
And then include the following CSS:
/*
Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
CSS from: http://codepen.io/transportedman/pen/NPWRGq
and: http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
Inspired from: http://codepen.io/Rowno/pen/Afykb
*/
.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."
Need to 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);
}
}
这篇关于Bootstrap 3 Carousel 淡入新幻灯片而不是滑动到新幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！