Peut le Twitter Bootstrap Carrousel plugin fade in et fade out sur la transition des diapositives

Question

J'ai un très de base de la mise en œuvre de la Twitter Bootstrap Carrousel plugin sur un site que je suis en train de (http://furnitureroadshow.com/). Je me demandais juste si quelqu'un avait élargi le Carrousel plugin de sorte qu'il s'allume et s'estompe sur la transition des diapositives?

J'ai trouvé cette question #2050 sur github.com (https://github.com/twitter/bootstrap/issues/2050) qui semble suggérer que, à ce stade, il n'est pas possible. Voulais juste voir si elle pourrait être ou a été fait.

Answer 1

Oui. Bootstrap utilise les transitions CSS de sorte qu'il peut être fait facilement, sans Javascript.

Le CSS:

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

J'ai remarqué cependant que la transition de fin de l'événement était de tir prématurément avec la valeur par défaut de l'intervalle de 5s et un effet de fondu de transition de 3s. Cognant le carrousel de l'intervalle de 8s donne un bel effet.

Très lisse.

Answer 2

Oui. Bien que j'utilise le code suivant.

.carousel.fade
{
    opacity: 1;

    .item
    {
        -moz-transition: opacity ease-in-out .7s;
        -o-transition: opacity ease-in-out .7s;
        -webkit-transition: opacity ease-in-out .7s;
        transition: opacity ease-in-out .7s;
        left: 0 !important;
        opacity: 0;
        top:0;
        position:absolute;
        width: 100%;
        display:block !important;
        z-index:1;
        &:first-child{
            top:auto;
            position:relative;
        }

        &.active
        {
            opacity: 1;
            -moz-transition: opacity ease-in-out .7s;
            -o-transition: opacity ease-in-out .7s;
            -webkit-transition: opacity ease-in-out .7s;
            transition: opacity ease-in-out .7s;
            z-index:2;
        }
    }
}

Puis changement de la classe sur le carrousel de "carrousel de la diapositive" à "carrousel fade". Cela fonctionne dans safari, chrome, firefox et IE 10. Il sera correctement rétrograder dans IE 9, cependant, le joli visage de l'effet ne se produit pas.

Edit: étant donné que cette réponse a été tellement populaire que j'ai ajouté les suivantes qui réécrit en pur CSS au lieu de le au-dessus de ce qui l'était MOINS:

.carousel.fade {
  opacity: 1;
}
.carousel.fade .item {
  -moz-transition: opacity ease-in-out .7s;
  -o-transition: opacity ease-in-out .7s;
  -webkit-transition: opacity ease-in-out .7s;
  transition: opacity ease-in-out .7s;
  left: 0 !important;
  opacity: 0;
  top:0;
  position:absolute;
  width: 100%;
  display:block !important;
  z-index:1;
}
.carousel.fade .item:first-child {
  top:auto;
  position:relative;
}
.carousel.fade .item.active {
  opacity: 1;
  -moz-transition: opacity ease-in-out .7s;
  -o-transition: opacity ease-in-out .7s;
  -webkit-transition: opacity ease-in-out .7s;
  transition: opacity ease-in-out .7s;
  z-index:2;
}

Answer 3

Oui. Bootstrap utilise les transitions CSS de sorte qu'il peut être fait facilement, sans Javascript. Suffit d'utiliser CSS3. Veuillez prendre un coup d'oeil à

carousel.carousel-fade

dans le CSS des exemples suivants:

• http://jsfiddle.net/seemly/ww67B/123/
• http://bootply.com/86170
• http://codepen.io/Rowno/pen/Afykb

Answer 4

C'est la meilleure solution que j'ai trouvé:

http://untame.net/2013/04/twitter-bootstrap-carousel/

Answer 5

Suis tombé sur ce problème lors de l'utilisation de Bootstrap 3. Ma solution a été d'ajouter de l' carousel-fade classe au carrousel DIV principale et la fente de la CSS suivant, quelque part après le Bootstrap CSS est inclus:

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

.carousel-fade .active {
  opacity: 1 !important;
}

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

.carousel-fade .carousel-control {
  opacity: 1 !important;
}

Le style des transitions de Bootstrap s'applique signifie que vous devez avoir au milieu de la foulée des transitions (actif à gauche, côté gauche) rapidement, sinon l'élément se termine juste en haut en voie de disparition (d'où la 1/2 seconde période de transition).

Je n'ai pas expérimenté avec réglage de l' .item et .left des périodes de transition, mais ils auront probablement besoin d'être ajustés proportionnellement pour garder l'effet à la recherche de nice.