Bootstrap 3 Carousel淡入新幻灯片而不是滑动到新幻灯片

时间：2013-08-31 13:34:12

标签： twitter-bootstrap

我正在使用Bootstrap 3，未经修改。

下面的

<!-- 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 -->

bootstrap 3的默认css：

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

我添加的一些CSS：

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

但是我无法弄清楚这个旋转木马怎么能有褪色效果。 我尝试将不透明度从1更改为0，当活动项目时，但它会生成2个动画，它会向左滑动并更改不透明度..

你能帮助我吗？

9 个答案:

答案 0 :(得分：95)

从3.2.x到3.3.x的更新打破了此处和其他线程所解释的一些解决方案，因为更改：“添加了转换以改善现代浏览器中的轮播性能。”

如果你使用 Bootstrap 3.3.x ，这里有一个解决方案：
http://codepen.io/transportedman/pen/NPWRGq

基本上你需要将“carousel-fade”类添加到你的旋转木马上，这样你才能拥有：
 <div class="carousel slide carousel-fade">

然后包含以下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);
    }
}

答案 1 :(得分：42)

这可以仅使用CSS来完成。要将轮播更改为淡入淡出过渡而不是幻灯片，请使用以下代码段中的一个（LESS或标准CSS）。

<强> LESS 

// Fade transition for carousel items
.carousel {
  .item {
    left: 0 !important;
    .transition(opacity .4s); //adjust timing here
  }
  .carousel-control {
    background-image: none; // remove background gradients on controls
  }
  // Fade controls with items
  .next.left,
  .prev.right {
    opacity: 1;
    z-index: 1;
  }
  .active.left,
  .active.right {
    opacity: 0;
    z-index: 2;
  }
}

普通CSS： 

/* Fade transition for carousel items */
.carousel .item {
    left: 0 !important;
      -webkit-transition: opacity .4s; /*adjust timing here */
         -moz-transition: opacity .4s;
           -o-transition: opacity .4s;
              transition: opacity .4s;
}
.carousel-control {
    background-image: none !important; /* remove background gradients on controls */
}
/* Fade controls with items */
.next.left,
.prev.right {
    opacity: 1;
    z-index: 1;
}
.active.left,
.active.right {
    opacity: 0;
    z-index: 2;
}

答案 2 :(得分：19)

一些好的答案，但我尝试的所有解决方案的问题是图像不会相互淡化。相反，第一个完全消失，而下一个消失。

经过几个小时的测试后发现了这种溶剂。 Thx到http://www.1squarepear.com/adding-a-responsive-bootstrap-image-carousel-that-fades-instead-of-slides/

  1. 在HTML代码中将.slide更改为.carousel元素上的.fade

  2. 在css中添加：

    .carousel.fade { opacity: 1; } .carousel.fade .item { transition: opacity ease-out .7s; left: 0; opacity: 0; /* hide all slides */ top: 0; position: absolute; width: 100%; display: block; } .carousel.fade .item:first-child { top: auto; opacity: 1; /* show first slide */ position: relative; } .carousel.fade .item.active { opacity: 1; }

答案 3 :(得分：7)

您只能使用css实现淡入淡出效果（而不是坚持使用默认幻灯片）。 将这些添加到样式表

.carousel .item {
    -webkit-transition: opacity 3s; 
    -moz-transition: opacity 3s; 
    -ms-transition: opacity 3s; 
    -o-transition: opacity 3s; 
    transition: opacity 3s;
}
.carousel .active.left {
    left:0;opacity:0;z-index:2;
}
.carousel .next {
    left:0;opacity:1;z-index:1;
}

答案 4 :(得分：2)

你可以在css3中使用转换：

＆＃13;
＆＃13; 
.carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
  z-index: 2;
}
＆＃13;
＆＃13;
＆＃13;

答案 5 :(得分：1)

我使用普通的.css。它运作得很好。请注意，我从bootstrap.min.css中删除了以下内容：

/* Fade transition for carousel items */

.carousel .item {
   left: 0 !important;
   -webkit-transition: opacity .4s;
    /*adjust timing here */ 
   -moz-transition: opacity .4s; 
   -o-transition: opacity .4s; 
   transition: opacity .4s; 
}

.carousel-control { 
   background-image: none !important; 
   /* remove background gradients on controls */ 
} 

/* Fade controls with items */

.next.left, .prev.right {
   opacity: 1; 
   z-index: 1;
}

.active.left, .active.right {
   opacity: 0;
   z-index: 2;
}

答案 6 :(得分：1)

for bootstrap 3，这就是我使用的

.carousel-fade .carousel-inner .item {
  opacity: 0;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  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;
}

答案 7 :(得分：1)

回复gerardnll回答通过淡入淡出效果扩展Bootstrap 3.3.x轮播的更少代码：

//
// Carousel Fade effect
// --------------------------------------------------

// inspired from http://codepen.io/Rowno/pen/Afykb
.carousel-fade {

    .carousel-inner {
        .item {
            .opacity(0);
            .transition-property(opacity);
            //.transition-duration(.8s);
        }

        .active {
            .opacity(1);

            &.left,
            &.right {
                left: 0;
                .opacity(0);
                z-index: 1;
            }
        }

        .next.left,
        .prev.right {
            .opacity(1);
        }
    }

    .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,
                &.prev,
                &.active.right,
                &.active.left {
                    .opacity(0);
                    .translate3d(0; 0; 0);
                }

                &.next.left,
                &.prev.right,
                &.active {
                    .opacity(1);
                    .translate3d(0; 0; 0);
                }
            }

        }

    }

}

唯一的事情是转换持续时间超过.8s（周围）时没有按预期工作。也许有人有解决这种奇怪行为的解决方案。

注意： LESS代码已注释.transition-duration(.8s);，因此使用默认的轮播转换持续时间。您可以使用该值并查看效果。较长的持续时间（> 0.8）使得淡化效果不太平滑。

答案 8 :(得分：0)

检查出来：http://codepen.io/Rowno/pen/Afykb 

.carousel-fade {
    .carousel-inner {
        .item {
            opacity: 0;
            transition-property: opacity;
        }

    .active {
        opacity: 1;
    }

    .active.left,
    .active.right {
        left: 0;
        opacity: 0;
        z-index: 1;
    }

    .next.left,
    .prev.right {
        opacity: 1;
    }
}

非常有效，我希望它有效

相关问题
最新问题