Bootstrap 4 Beta中的Carousel淡入淡出轉換

我試圖修改新的Bootstrap 4 Beta Carousel從淡入淡出而不是滑動操作並使用CSS進行轉換。我無法讓它工作。我不確定是否需要特殊的Javascript調用。Bootstrap 4 Beta中的Carousel淡入淡出轉換

請參閱Codepen這裏：

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

 
html, 
 
body, 
 
.carousel, 
 
.carousel-inner, 
 
.carousel-inner .item { 
 
    height: 100%; 
 
}

<div class="container"> 
 

 
    <div id="carousel" class="carousel slide carousel-fade" data-ride="carousel"> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="carousel-item active"> 
 
     <img class="d-block img-fluid" src="https://tuniverse.io/wp-content/uploads/2016/12/boss-tu-2-06.jpg" alt="First slide"> 
 
     </div> 
 
     <div class="carousel-item"> 
 
     <img class="d-block img-fluid" src="https://tuniverse.io/wp-content/uploads/2016/12/boss-tu-2-08.jpg" alt="Second slide"> 
 
     </div> 
 
     <div class="carousel-item"> 
 
     <img class="d-block img-fluid" src="https://tuniverse.io/wp-content/uploads/2016/12/boss-tu-2-09.jpg" alt="Third slide"> 
 
     </div> 
 
    </div> 
 
    <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev"> 
 
     <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="carousel-control-next" href="#carousel" role="button" data-slide="next"> 
 
     <span class="carousel-control-next-icon" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
    </div> 
 
    <!-- end carousel --> 
 

 
</div> 
 
<!-- end container -->

感謝

來源

2017-09-26 jdscomms

是啊，謝謝，我已經多次試圖讓這段代碼，沒有運氣的工作。但謝謝你的鼓勵。 – jdscomms

我發佈的鏈接有**工作**代碼。你不需要試着讓它工作，如果它正在工作...... – ProEvilz

告訴你什麼 - 看看我發佈的代碼並幫助我。 – jdscomms

這裏是與引導4測試版有效的解決方案。

.carousel-fade .carousel-item { 
 
    display: block; 
 
    position: relative; 
 
    opacity: 0; 
 
    transition: opacity .75s ease-in-out; 
 
} 
 

 
.row { 
 
\t \t width: 100%; 
 
} 
 

 
.carousel-fade .carousel-item.active { 
 
    opacity: 1; 
 
    display: block; 
 
} 
 
.row { 
 
    width: 100%; 
 
} 
 
.carousel { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: lightskyblue; 
 
} 
 
.carousel-inner { 
 
    background-color: pink; 
 
    height: 100%; 
 
} 
 
.carousel-item { 
 
    background-color: yellow; 
 
    opacity .5; 
 
} 
 
a.carousel-control-next:link, a.carousel-control-prev:link { 
 
    background-color: transparent; 
 
    text-decoration: none; 
 
    opacity: .5; 
 
} 
 
a.carousel-control-next:hover, a.carousel-control-prev:hover { 
 
    background-color: transparent; 
 
    text-decoration: none; 
 
    opacity: 1; 
 
} 
 
.carousel-control-next-icon, .carousel-control-prev-icon { 
 
    position:relative; 
 
    background-image: none; 
 
}  
 
.carousel-control-next-icon:before { 
 
    top:0; 
 
    left:-5px; 
 
    padding-right:10px; 
 
} 
 
.carousel-control-prev-icon:before { 
 
    top:0; 
 
    left:-5px; 
 
    padding-right:10px; 
 
} 
 
.sidebar { 
 
    background-color: #e1e1e1; 
 
}

<head> 
 

 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"> 
 

 
</head> 
 

 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-lg-8"> 
 
\t \t <div id="carousel" class="carousel carousel-fade" data-ride="carousel"> 
 
\t \t \t <div class="carousel-inner" role="listbox"> 
 
\t \t \t \t <div class="carousel-item active"> 
 
\t \t \t \t \t <img class="d-block w-100" src="https://i.imgur.com/FmtTabr.jpg" alt="First slide"> 
 
\t \t \t \t </div> <!-- close carousel-item 1 --> 
 
\t \t \t \t <div class="carousel-item" style="position: absolute; top:0px; width: 100% ; height: 100%"> 
 
\t \t \t \t \t <img class="d-block w-100" src="https://i.imgur.com/UioJ4ix.jpg" alt="Second slide"> 
 
\t \t \t \t </div> <!-- close carousel-item 2 --> 
 
\t \t \t \t <div class="carousel-item" style="position: absolute; top:0px; width: 100% ; height: 100%"> 
 
\t \t \t \t \t <img class="d-block w-100" src="https://i.imgur.com/UkPZYcB.jpg" alt="Third slide"> 
 
\t \t \t \t </div> <!-- close carousel-item 3 --> 
 
\t \t \t </div> <!-- close carousel-inner --> 
 

 
\t \t \t <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev"> 
 
\t \t \t \t <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
 
\t \t \t \t <span class="sr-only">Previous</span> 
 
\t \t \t </a> 
 
\t \t \t <a class="carousel-control-next" href="#carousel" role="button" data-slide="next"> 
 
\t \t \t \t <span class="carousel-control-next-icon" aria-hidden="true"></span> 
 
\t \t \t \t <span class="sr-only">Next</span> 
 
\t \t \t </a> 
 
\t \t </div> <!-- close carousel --> 
 

 
\t \t <table class="table table-bordered mt-3"> 
 
\t \t \t <thead class="thead-default"> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <th colspan="2" class="text-center">Table head</th> \t 
 
\t \t \t \t </tr> 
 
\t \t \t </thead> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>content</td> 
 
\t \t \t \t \t <td>content</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>content</td> 
 
\t \t \t \t \t <td>content</td> 
 
\t \t \t \t </tr> 
 
\t \t \t </tbody> 
 
\t \t </table> 
 
    </div> <!-- end col-lg-8 --> 
 
    <div class="col-lg-4 sidebar"> 
 
\t  <p>Sidebar</p> 
 
    </div> <!-- close sidebar --> 
 
    </div> <!-- close row --> 
 
</div> <!-- close container --> 
 

 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

來源

2017-09-29 17:46:54 jdscomms

我只是想要這個效果，但是我與display：block，do你知道我能做什麼嗎？ –

Bootstrap 4 Beta中的Carousel淡入淡出轉換

回答

相關問題