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

8gsdolmq  于 2023-09-28  发布在  Bootstrap
关注(0)|答案(9)|浏览(133)

我用的是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动画，它向左滑动，改变不透明度太。
你能帮帮我吗？

twitter-bootstrap

9条答案

按热度按时间
snvhrwxg

snvhrwxg1#

从3.2.x到3.3.x的更新打破了这里和其他线程上解释的一些解决方案，因为这个变化：“* 添加了转换以提高现代浏览器中的轮播性能。*”
如果您使用的是Bootstrap 3.3.x，这里有一个解决方案：
http://codepen.io/transportedman/pen/NPWRGq
基本上，你需要将“carousel-fade”类添加到你的carousel中，这样你就有了：
<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);
    }
}
赞(0）分享  回复(0）举报  2023-09-28
j91ykkif

j91ykkif2#

这可以只使用CSS来实现。要将旋转木马更改为淡入淡出而不是幻灯片，请使用以下片段（LESS或标准CSS）中的一个。

更少

// 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;
}
赞(0）分享  回复(0）举报  2023-09-28
7uhlpewt

7uhlpewt3#

一些很好的答案，但我尝试过的所有解决方案的问题是，图像不会褪色到对方。相反，第一个完全淡出，然后下一个淡入。
1.在HTML代码中，将.carousel元素的.slide更改为.fade
1.在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;
    }
赞(0）分享  回复(0）举报  2023-09-28
t3irkdon

t3irkdon4#

你可以只使用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;
}
赞(0）分享  回复(0）举报  2023-09-28
i7uq4tfw

i7uq4tfw5#

对于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;
}
赞(0）分享  回复(0）举报  2023-09-28
jchrr9hc

jchrr9hc6#

你可以在css3中使用transition：

.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;
}
赞(0）分享  回复(0）举报  2023-09-28
lnvxswe2

lnvxswe27#

我用的是普通的. 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;
}
赞(0）分享  回复(0）举报  2023-09-28
rhfm7lfc

rhfm7lfc8#

在回答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);
                }
            }

        }

    }

}

唯一的问题是过渡持续时间，当长于0. 8秒（左右）时，它不能按预期工作。也许有人有办法解决这种奇怪的行为。

**注意：**LESS代码注解了.transition-duration(.8s);，所以使用默认轮播切换时长。您可以使用该值并查看效果。较长的持续时间（> 0.8）会使淡入淡出效果变得不那么平滑。

赞(0）分享  回复(0）举报  2023-09-28
w41d8nur

w41d8nur9#

看看这个：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;
    }
}

效果很好，我希望能成功

赞(0）分享  回复(0）举报  2023-09-28
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com