Fade-Effekt in ein Bootstrap 3 Karussell

Question

Ich versuche, ein Karussell-Bootstrap mit Fade-Effekt zu machen, aber ich bin nicht so Experte für diesen Effekt. Ich dachte, so etwas wie dieser CSS-Code

opacity: 0; 
-webkit-transform: translate3d(0, 0, 0); 
transform: translate3d(0, 0, 0); 

, aber ich weiß nicht, wie es in meinem Code anzuwenden.

Das ist mein Karussell:

<div id="myCarousel" class="carousel slide"> 
    <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="" contenteditable="false"></li> 
     <li data-target="#myCarousel" data-slide-to="1" class="active" contenteditable="false"></li> 
     <li data-target="#myCarousel" data-slide-to="2" class="" contenteditable="false"></li> 
    </ol> 
    <div class="carousel-inner"> 
     <div class="item" style=""> 
      <img src="images/slide/slide-1.jpg" alt="" class="" width="3000px" height="800px"> 
      <div class="carousel-caption"> 
       <h4 class="">First Slide Title</h4> 
       <p class=""> 
        Description for First Slide, this First Slide. 
       </p> 
      </div> 
     </div> 
     <div class="item active"> 
      <img src="images/slide/slide-2.jpg" alt="" class="" width="3000px" height="800px"> 
      <div class="carousel-caption"> 
       <h4 class="">Second Slide Title</h4> 

       <p class=""> 
        Description for Second Slide, this is Second Slide. 
       </p> 
      </div> 
     </div> 
     <div class="item" style=""> 
      <img src="images/slide/slide-3.jpg" alt="" class="" width="3000px" height="800px"> 
      <div class="carousel-caption"> 
       <h4 class="">Third Slide Title</h4> 

          <p class=""> 
        Description for Third Slide, this is Third Slide. 
       </p> 
      </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> 

und das ist mein custom.css:

.carousel-inner > .item > img, .carousel-inner > .item > a > img { 
    display: block; 
    height: 800px; 
    min-width: 100%; 
    width: 100%; 
    max-width: 100%; 
    line-height: 1; 
} 

Answer 1

habe ich die Klasse Karussell-fade und einige benutzerdefinierte CSS es in Aktion: http://www.bootply.com/4kbsvxixnA

<div id="myCarousel" class="carousel slide carousel-fade"> 
    <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="" contenteditable="false"></li> 
     <li data-target="#myCarousel" data-slide-to="1" class="active" contenteditable="false"></li> 
     <li data-target="#myCarousel" data-slide-to="2" class="" contenteditable="false"></li> 
    </ol> 
    <div class="carousel-inner"> 
     <div class="item" style=""> 
      <img src="https://placeholdit.imgix.net/~text?txtsize=128&bg=0099ff&txtclr=ffffff&txt=Blue&w=3000&h=800&fm=png" alt="" class="" width="3000px" height="800px"> 
      <div class="carousel-caption"> 
       <h4 class="">First Slide Title</h4> 
       <p class=""> 
        Description for First Slide, this First Slide. 
       </p> 
      </div> 
     </div> 
     <div class="item active"> 
      <img src="https://placeholdit.imgix.net/~text?txtsize=128&bg=ff33d6&txtclr=ffffff&txt=Pink&w=3000&h=800&fm=png" alt="" class="" width="3000px" height="800px"> 
      <div class="carousel-caption"> 
       <h4 class="">Second Slide Title</h4> 

       <p class=""> 
        Description for Second Slide, this is Second Slide. 
       </p> 
      </div> 
     </div> 
     <div class="item" style=""> 
      <img src="https://placeholdit.imgix.net/~text?txtsize=128&bg=97e345&txtclr=ffffff&txt=Green&w=3000&h=800&fm=png" alt="" class="" width="3000px" height="800px"> 
      <div class="carousel-caption"> 
       <h4 class="">Third Slide Title</h4> 

          <p class=""> 
        Description for Third Slide, this is Third Slide. 
       </p> 
      </div> 
     </div> 
    </div> 

CSS:

/* YOUR CSS simplified */ 
.carousel-inner > .item > img, .carousel-inner > .item > a > img { 
     display: block; 
     height: auto; 
     width: 100%; 
     line-height: 1; 
    } 

/*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 2

Karussell-fade Elternklasse der

<div id="myCarousel" class="carousel slide carousel-fade"> 

hinzufügen und fügen Sie die folgenden CSS zu Ihrem benutzerdefinierten CSS-Stylesheet hinzu.

.carousel.carousel-fade .item { 
    -webkit-transition: opacity 0.5s ease-in-out; 
    -moz-transition: opacity 0.5s ease-in-out; 
    -ms-transition: opacity 0.5s ease-in-out; 
    -o-transition: opacity 0.5s ease-in-out; 
    transition: opacity 0.5s ease-in-out; 
    opacity:0; 
} 

.carousel.carousel-fade .active.item { 
    opacity:1; 
} 

.carousel.carousel-fade .active.left, 
.carousel.carousel-fade .active.right { 
    left: 0; 
    z-index: 2; 
    opacity: 0; 
    filter: alpha(opacity=0); 
} 

.carousel.carousel-fade .next, 
.carousel.carousel-fade .prev { 
    left: 0; 
    z-index: 1; 
} 

.carousel.carousel-fade .carousel-control { 
    z-index: 3; 
} 

Ich habe Dummy-Bilder von Bootstrap verwendet, um eine Demo zu erstellen, welche die verblassen Verhalten.

.carousel.carousel-fade .item { 
 
\t -webkit-transition: opacity 0.5s ease-in-out; 
 
\t -moz-transition: opacity 0.5s ease-in-out; 
 
\t -ms-transition: opacity 0.5s ease-in-out; 
 
\t -o-transition: opacity 0.5s ease-in-out; 
 
\t transition: opacity 0.5s ease-in-out; 
 
\t opacity:0; 
 
} 
 

 
.carousel.carousel-fade .active.item { 
 
\t opacity:1; 
 
} 
 

 
.carousel.carousel-fade .active.left, 
 
.carousel.carousel-fade .active.right { 
 
\t left: 0; 
 
\t z-index: 2; 
 
\t opacity: 0; 
 
\t filter: alpha(opacity=0); 
 
} 
 

 
.carousel.carousel-fade .next, 
 
.carousel.carousel-fade .prev { 
 
\t left: 0; 
 
\t z-index: 1; 
 
} 
 

 
.carousel.carousel-fade .carousel-control { 
 
\t z-index: 3; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div id="myCarousel" class="carousel slide carousel-fade"> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#myCarousel" data-slide-to="0" class="" contenteditable="false"></li> 
 
     <li data-target="#myCarousel" data-slide-to="1" class="active" contenteditable="false"></li> 
 
     <li data-target="#myCarousel" data-slide-to="2" class="" contenteditable="false"></li> 
 
    </ol> 
 
    <div class="carousel-inner"> 
 
     <div class="item" style=""> 
 
      <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzkwMHg1MDAvYXV0by8jNTU1OiMzMzMvdGV4dDpUaGlyZCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE1YWZmOGY3Yjk1IHRleHQgeyBmaWxsOiMzMzM7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NDVwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTVhZmY4ZjdiOTUiPjxyZWN0IHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjNTU1Ii8+PGc+PHRleHQgeD0iMjk4LjMyMDMxMjUiIHk9IjI3MC4xIj5UaGlyZCBzbGlkZTwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="" class=""> 
 
      <div class="carousel-caption"> 
 
       <h4 class="">First Slide Title</h4> 
 
       <p class=""> 
 
        Description for First Slide, this First Slide. 
 
       </p> 
 
      </div> 
 
     </div> 
 
     <div class="item active"> 
 
      <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzkwMHg1MDAvYXV0by8jNTU1OiMzMzMvdGV4dDpUaGlyZCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE1YWZmOGY3Yjk1IHRleHQgeyBmaWxsOiMzMzM7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NDVwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTVhZmY4ZjdiOTUiPjxyZWN0IHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjNTU1Ii8+PGc+PHRleHQgeD0iMjk4LjMyMDMxMjUiIHk9IjI3MC4xIj5UaGlyZCBzbGlkZTwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="" class=""> 
 
      <div class="carousel-caption"> 
 
       <h4 class="">Second Slide Title</h4> 
 

 
       <p class=""> 
 
        Description for Second Slide, this is Second Slide. 
 
       </p> 
 
      </div> 
 
     </div> 
 
     <div class="item" style=""> 
 
      <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzkwMHg1MDAvYXV0by8jNTU1OiMzMzMvdGV4dDpUaGlyZCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE1YWZmOGY3Yjk1IHRleHQgeyBmaWxsOiMzMzM7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NDVwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTVhZmY4ZjdiOTUiPjxyZWN0IHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjNTU1Ii8+PGc+PHRleHQgeD0iMjk4LjMyMDMxMjUiIHk9IjI3MC4xIj5UaGlyZCBzbGlkZTwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="" class="" > 
 
      <div class="carousel-caption"> 
 
       <h4 class="">Third Slide Title</h4> 
 

 
          <p class=""> 
 
        Description for Third Slide, this is Third Slide. 
 
       </p> 
 
      </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>