[Jquery] Kann das Twitter-Bootstrap-Karussell-Plugin beim Folienübergang ein- und ausgeblendet werden?


Answers

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 "Karussell-Folie" zu "Karussell-Fade". Dies funktioniert in Safari, Chrome, Firefox und IE 10. Es wird korrekt in IE 9 downgraden, aber der nette Gesichtseffekt passiert nicht.

Edit: Da diese Antwort so populär geworden ist, habe ich das folgende hinzugefügt, das als reines CSS anstelle des obigen geschrieben wurde, 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;
}
Question

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

Ich habe diese Ausgabe # 2050 auf github.com ( https://github.com/twitter/bootstrap/issues/2050 ) gefunden, die darauf hinweist, dass dies zu diesem Zeitpunkt nicht möglich ist. Ich wollte nur sehen, ob es gemacht werden kann oder wurde.







Wenn Sie Bootstrap 3.3.x verwenden, verwenden Sie diesen Code (Sie müssen Ihrem Karussell den Klassennamen Karussell-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;
}



Für Bootstrap 3.3.6. - Jede oben gestellte Antwort hat mir nicht für jeden Browser geholfen (vor allem viele Probleme in Firefox). Hoffe, dass das jemandem hilft.

Fügen Sie einfach class carousel-fade wie folgt hinzu:

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

und füge diesen code zu deiner 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;
 }