Transition en fondu pour Carousel dans Bootstrap 4 Beta

J'essaie de modifier le nouveau BootShop 4 Beta Carousel pour passer de la diapositive à la diapositive avec un fondu plutôt qu'une action glissante, et en utilisant CSS. Je ne peux pas le faire fonctionner. Je ne suis pas sûr si un appel Javascript spécial est nécessaire.Transition en fondu pour Carousel dans Bootstrap 4 Beta

S'il vous plaît voir Codepen ici:

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

Merci

Source

2017-09-26 jdscomms

Ouais, merci j'ai essayé à plusieurs reprises d'obtenir ce morceau de code pour travailler avec pas de chance. Mais merci pour l'encouragement. – jdscomms

Le lien que j'ai posté a le code ** working **. Vous n'avez pas besoin d'essayer et de le faire fonctionner si ça fonctionne ... – ProEvilz

Dites-moi ce que - regardez le code que j'ai posté et aidez-moi. – jdscomms

est ici une solution qui fonctionne avec Bootstrap 4 Beta.

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

Source

2017-09-29 17:46:54 jdscomms

Je veux juste cet effet, mais j'ai des conflits avec display: block, do tu sais ce que je peux faire? –

Transition en fondu pour Carousel dans Bootstrap 4 Beta

Répondre

Questions connexes