Bootstrap 3 Băng chuyền mờ dần sang trang trình bày mới thay vì trượt sang trang trình bày mới

Question

Tôi đang sử dụng Bootstrap 3, chưa sửa đổi.

Dưới đây là

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

mặc định css từ 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; 
    } 
} 

một số css mà tôi đã thêm:

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

nhưng tôi không thể tìm ra cách tôi có thể băng chuyền này với hiệu ứng mờ dần. Tôi đã cố gắng thay đổi độ mờ từ 1 đến 0, khi mục đang hoạt động, nhưng nó tạo ra 2 hình ảnh động, nó trượt sang trái và thay đổi độ mờ ..

Bạn có thể giúp tôi không?

Answer 1

Điều này có thể được thực hiện chỉ bằng CSS. Để thay đổi băng chuyền thành chuyển đổi mờ dần thay vì trượt, hãy sử dụng một của các đoạn mã sau (LESS hoặc CSS chuẩn).

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 Plain:

/* 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; 
} 

Answer 2

Bạn có thể đạt được một hiệu ứng mờ dần (thay vì gắn bó với slide mặc định) chỉ sử dụng css. Thêm chúng vào biểu định kiểu của bạn

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

Answer 3

Tôi đã sử dụng đồng bằng .css. Nó hoạt động rất tốt. Lưu ý rằng tôi đã xóa sau từ 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; 
} 

Answer 4

Bản cập nhật từ 3.2.x đến 3.3.x đã phá vỡ một số các giải pháp giải thích ở đây và trên đề khác vì sự thay đổi: "gia tăng biến đổi để cải thiện hiệu suất băng chuyền trong các trình duyệt hiện đại "

Nếu bạn đang sử dụng Bootstrap 3.3.x có một giải pháp ở đây:
http://codepen.io/transportedman/pen/NPWRGq

Về cơ bản bạn cần phải thêm lớp "băng chuyền-phai" để băng chuyền của bạn để bạn có:
<div class="carousel slide carousel-fade">

Và sau đó bao gồm CSS sau đây:

/* 
    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); 
    } 
} 

Answer 5

cho bootstrap 3, đây là những gì tôi đã từng

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

Answer 6

Kiểm tra này ra: 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; 
    } 
} 

trình kỳ diệu, tôi hy vọng nó hoạt động

Answer 7

Trong thư trả lời để gerardnll 's trả lời mã Ít để mở rộng Bootstrap 3.3.x carousel bởi hiệu ứng mờ dần:

// 
// 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); 
       } 
      } 

     } 

    } 

} 

Điều duy nhất là thời lượng chuyển đổi không hoạt động như mong đợi khi dài hơn .8s (xung quanh). Có lẽ ai đó có một giải pháp để giải quyết hành vi kỳ lạ này.

Lưu ý: Mã LESS có .transition-duration(.8s); nhận xét, do đó thời lượng chuyển đổi băng chuyền mặc định được sử dụng. Bạn có thể chơi với giá trị và xem hiệu ứng. Thời gian dài hơn (> 0.8) làm mờ hiệu ứng mờ dần.

Answer 8

bạn có thể sử dụng chuyển đổi trong css3:

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

Answer 9

Một số câu trả lời tốt, nhưng vấn đề với tất cả các giải pháp tôi đã cố gắng là những hình ảnh doesn't dần vào nhau. Thay vào đó, cái đầu tiên sẽ biến mất hoàn toàn và cái tiếp theo mờ dần.

Sau một vài giờ thử nghiệm tìm thấy sự sollution này. Thx để http://www.1squarepear.com/adding-a-responsive-bootstrap-image-carousel-that-fades-instead-of-slides/

1. Trong sự thay đổi mã HTML từ .slide để .fade trên các yếu tố .carousel

2. Thêm này trong 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; }