web-dev-qa-db-fra.com

Bootstrap 4.0.0 Transition de fondu de carrousel

Plusieurs questions ont été posées sur Stackoverflow concernant la transition de fondu de carrousel, mais aucune d’entre elles ne semble fonctionner avec une implémentation 4.0.0 par défaut:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Est-ce que le bootstrap a changé le mode de transition de carousel-item -s depuis la version Alpha.6? Comment procéder pour implémenter la transition de fondu au lieu de glisser dans 4.0.0?

csstwitter-bootstrapbootstrap-4
6
astralmaster

J'ai rouvert ceci parce que la question a été changée de 4 Beta à 4.0.0 (stable) ...

Fade Bootstrap 4.0.0 carrousel:
https://www.codeply.com/go/LhLJlldsLN

.carousel-fade .carousel-item {
 opacity: 0;
 transition-duration: .6s;
 transition-property: opacity;
}

.carousel-fade  .carousel-item.active,
.carousel-fade  .carousel-item-next.carousel-item-left,
.carousel-fade  .carousel-item-prev.carousel-item-right {
  opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade  .active.carousel-item-right {
 opacity: 0;
}

.carousel-fade  .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade  .active.carousel-item-prev {
 transform: translateX(0);
 transform: translate3d(0, 0, 0);
}

L'effet de fondu a été supprimé du carrousel pendant la version bêta 4.0 et n'est également pas disponible dans la version 4.0.0. Cette demande pull indique que l'effet de fondu reviendra en 4.1 ou 4.2. En attendant, le CSS ci-dessus fonctionnera pour 4.0.0

10
Zim

Dans bootstrap 4, vous pouvez ajouter "carrousel-fade" class comme ceci.

<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel"> 
....
</div>
7
ronaldtgi

Devrait être corrigé dans Bootstrap 4.1.

https://blog.getbootstrap.com/2018/04/09/bootstrap-4-1/

0
Chris Go