web-dev-qa-db-fra.com

Le plug-in Twitter Bootstrap Carousel peut-il apparaître et disparaître progressivement lors de la transition entre diapositives?

J'ai une implémentation très basique du plugin Twitter Bootstrap Carousel sur un site sur lequel je travaille ( http://furnitureroadshow.com/ ). Je me demandais si quelqu'un avait étendu le plug-in Carousel pour qu'il apparaisse et disparaisse progressivement lors de la transition entre les diapositives?

J'ai trouvé ce numéro # 2050 sur github.com ( https://github.com/Twitter/bootstrap/issues/2050 ) qui semble suggérer qu'à ce stade, ce n'est pas possible. Je voulais juste voir si cela pouvait être ou a été fait.

jquerytwitter-bootstrapcarousel
67
generalopinion

Oui. Bootstrap utilise des transitions CSS, ce qui permet de le faire 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 toutefois remarqué que l'événement de fin de transition se déclenchait prématurément avec un intervalle par défaut de 5 secondes et une transition en fondu de 3 secondes. Le fait de réduire l'intervalle du carrousel à 8 secondes donne un effet de Nice.

Très doux.

127
StrangeElement

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 changez la classe sur le carrousel de "glissière de carrousel" à "fondu de carrousel". Cela fonctionne dans safari, chrome, firefox et IE 10. Il rétrogradera correctement dans IE 9, cependant, l'effet Nice face ne se produit pas.

Edit: Depuis que cette réponse est devenue si populaire, j’ai ajouté ce qui suit qui a été réécrit en tant que CSS pur à la place de ce qui précède é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;
}
75
Robert McKee

Oui. Bootstrap utilise des transitions CSS, ce qui permet de le faire facilement sans Javascript ..__, utilisez simplement CSS3. S'il vous plaît jeter un oeil à

carousel.carousel-fade

dans le CSS des exemples suivants: 

19
Jens A. Koch

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

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

11
Mike Stumpf

Je suis tombé sur ce problème lors de l’utilisation de Bootstrap 3 . Ma solution consistait à ajouter la classe carousel-fade à la DIV principale du carrousel et à insérer le CSS suivant, quelque part après le CSS Bootstrap 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;
}

Les transitions de style appliquées par Bootstrap signifient que vous devez effectuer rapidement les transitions à mi-chemin (actif à gauche, à gauche), sinon l'élément finit par disparaître (d'où le temps de transition de 1/2 seconde).

Je n'ai pas essayé d'ajuster les temps de transition .item et .left, mais ils devront probablement être ajustés proportionnellement pour que l'effet ait une belle apparence.

4
Raad

Si vous utilisez Bootstrap 3.3.x, utilisez ce code (Vous devez ajouter le nom de classe carrousel-fade à votre carrousel).

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

Remarque: Si vous utilisez Bootstrap + AngularJS + UI, les classes Bootstrap, .left, .right et .next ne sont jamais ajoutées. En utilisant l'exemple sur le lien suivant et le CSS de Robert McKee, la réponse fonctionne. Je voulais commenter car il a fallu 3 jours pour trouver une solution complète. J'espère que cela aide les autres!

https://angular-ui.github.io/bootstrap/#/carousel

Extrait de code à partir de l'interface utilisateur Bootstrap Demo au lien ci-dessus.

angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
  $scope.myInterval = 5000;
  var slides = $scope.slides = [];
  $scope.addSlide = function() {
    var newWidth = 600 + slides.length + 1;
    slides.Push({
      image: 'http://placekitten.com/' + newWidth + '/300',
      text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
        ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
    });
  };
  for (var i=0; i<4; i++) {
    $scope.addSlide();
  }
});

Html À partir de l'interface utilisateur Bootstrap, Notice J'ai ajouté la classe .fade à l'exemple.

<div ng-controller="CarouselDemoCtrl">
    <div style="height: 305px">
        <carousel class="fade" interval="myInterval">
          <slide ng-repeat="slide in slides" active="slide.active">
            <img ng-src="{{slide.image}}" style="margin:auto;">
            <div class="carousel-caption">
              <h4>Slide {{$index}}</h4>
              <p>{{slide.text}}</p>
            </div>
          </slide>
        </carousel>
    </div>
</div>

CSS de la réponse de Robert McKee ci-dessus

.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;
}
/*
Added z-index to raise the left right controls to the top
*/
.carousel-control {
z-index:3;
}
0
phanf

Pour Bootstrap 3.3.6. - aucune des réponses postées ci-dessus ne m'aidait pour tous les navigateurs (surtout des problèmes avec Firefox). J'espère que cela aidera quelqu'un.

Ajoutez simplement la classe carrousel-fade comme ceci:

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

et ajoutez ce code à votre css:

.carousel-fade .carousel-inner .item {
    -webkit-transition: all 1.1s ease-in-out, opacity 1s ease-in;
    -moz-transition: all 1.1s ease-in-out, opacity 1s ease-in;
    -ms-transition: all 1.1s ease-in-out, opacity 1s ease-in;
    -o-transition: all 1.1s ease-in-out, opacity 1s ease-in;
    transition: all 1.1s ease-in-out, opacity 1s ease-in;
}
 .carousel-fade .carousel-inner .item,
 .carousel-fade .carousel-inner .active.left,
 .carousel-fade .carousel-inner .active.right {
     opacity: 0 !important;
 }
 .carousel-fade .carousel-inner .active,
 .carousel-fade .carousel-inner .next.left,
 .carousel-fade .carousel-inner .prev.right {
     opacity: 1 !important;
 }
 .carousel-fade .carousel-control {
     z-index: 2 !important;
 }
0
D8tectx