it-swarm.com.de

Kann das Twitter Bootstrap Carousel Plugin beim Folienübergang ein- und ausgeblendet werden

Ich habe eine sehr grundlegende Implementierung des Twitter Bootstrap Carousel-Plugins auf einer Website, an der ich gerade arbeite ( http://furnitureroadshow.com/ ). Ich habe mich nur gefragt, ob jemand das Carousel-Plugin so erweitert hat, dass es beim Folienübergang ein- und ausgeblendet wird.

Ich habe dieses Problem # 2050 auf github.com ( https://github.com/Twitter/bootstrap/issues/2050 ) gefunden, das den Eindruck erweckt, dass es zu diesem Zeitpunkt nicht möglich ist. Ich wollte nur sehen, ob es möglich ist oder wurde.

67
generalopinion

Ja. Bootstrap verwendet CSS-Übergänge, so dass dies ohne Javascript möglich ist.

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

Ich bemerkte jedoch, dass das Übergangsende-Ereignis mit dem Standardintervall von 5 Sekunden und einem Überblendungsübergang von 3 Sekunden vorzeitig ausgelöst wurde. Wenn Sie das Karussellintervall auf 8 Sekunden stoßen, erhalten Sie einen Nice-Effekt.

Sehr weich.

127
StrangeElement

Ja, obwohl ich den folgenden Code verwende.

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

Dann ändern Sie die Klasse auf dem Karussell von "Karussellrutsche" auf "Karussellfade". Dies funktioniert in Safari, Chrome, Firefox und IE 10. Es wird korrekt in IE 9 herabgestuft, der Nice-Face-Effekt tritt jedoch nicht auf.

Edit: Da diese Antwort so populär geworden ist, habe ich Folgendes hinzugefügt, das als reines CSS umgeschrieben wurde, anstatt des obigen, das WENIGER war:

.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

Ja. Bootstrap verwendet CSS-Übergänge, so dass dies auch ohne Javascript möglich ist .. __ Verwenden Sie CSS3. Bitte werfen Sie einen Blick darauf

carousel.carousel-fade

im CSS der folgenden Beispiele: 

19
Jens A. Koch

Dies ist die beste Lösung, die ich gefunden habe:

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

11
Mike Stumpf

Bei der Verwendung von Bootstrap 3 ..__ kam es zu diesem Problem. Meine Lösung bestand darin, die carousel-fade-Klasse zum Karussellhaupt-DIV hinzuzufügen und das folgende CSS in irgendwo after das Bootstrap-CSS einzufügen:

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

Die Stilübergänge, die Bootstrap anwendet, bedeuten, dass Sie die Mid-Stride-Übergänge (aktiv links, nächste links) schnell haben müssen. Andernfalls verschwindet das Element (dh die ½-Sekunden-Übergangszeit).

Ich habe nicht mit der Anpassung der .item- und .left-Übergangszeiten experimentiert, aber sie werden wahrscheinlich proportional angepasst werden müssen, damit der Effekt schön bleibt.

4
Raad

Wenn Sie Bootstrap 3.3.x verwenden, verwenden Sie diesen Code (Sie müssen dem Karussell den Klassennamen carousel-fade hinzufügen).

.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

Anmerkung: Wenn Sie Bootstrap + AngularJS + UI Bootstrap verwenden, werden die Klassen .left .right und .next niemals hinzugefügt. An dem Beispiel unter folgendem Link und der CSS Antwort von Robert McKee klappt es. Ich wollte einen Kommentar abgeben, da es 3 Tage dauerte, um eine vollständige Lösung zu finden. Hoffe das hilft anderen!

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

Code-Ausschnitt aus der Bootstrap-Demo der Benutzeroberfläche unter dem obigen Link.

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 Von UI Bootstrap, Notice habe ich die .fade-Klasse zum Beispiel hinzugefügt.

<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 aus der obigen Antwort von Robert McKee

.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

Für Bootstrap 3.3.6. - Jede Antwort, die ich oben gepostet habe, hat mir nicht bei jedem Browser geholfen (besonders bei Firefox gab es viele Probleme). Hoffe das hilft jemandem.

Fügen Sie einfach Klassen-Karussell-Fade wie folgt hinzu:

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

und fügen Sie diesen Code Ihrer CSS hinzu:

.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