wake-up-neo.com

Wie kann ich die gleitende Animation so ändern, dass sie beim Übergang auf Bootstrap 3 Carousel ein-/ausgeblendet wird

Ich habe versucht, den Gleiteffekt des Bootstrap 3-Karussells so zu ändern, dass er ein-/ausgeblendet wird. Ich habe die hier gegebenen Anweisungen befolgt Kann das Twitter Bootstrap Carousel-Plugin beim Folienübergang ein- und ausgeblendet werden

der CSS-Code ist (im Link angegeben) unten

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

Mein Beispiellink ist am Ende dieses Abschnitts. Ich mache es, aber das Problem ist, dass der vorherige Button nicht einwandfrei funktioniert. Möglicherweise ist die Lösung perfekt für bootstrap2. Vielen Dank für Ihre Hilfe! Ich bin neu hier, es tut mir leid für mein schlechtes Englisch und wenn ich eine dumme Frage gestellt habe!

https://dl.dropboxusercontent.com/u/35758776/xenxbd/contrastic/index.html#parallux-wrapper-04

14
asifsaho

Probieren Sie dieses Karussell-Beispiel aus. Es zeigt Ihnen, wie Sie die Deckkraft für die vorherigen und nächsten Schaltflächen ändern können.

.carousel-fade .carousel-inner .item {
  opacity: 0;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
  opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-control {
  z-index: 2;
}

http://bootply.com/86170

30
Zim

Füge die Klasse ".carousel-fade" in dein Karussell ein . Css:

.carousel-fade .active.left {
        left:0;
        opacity:0;
        -webkit-transition: opacity 1s; /*time < to $.carousel.interval setup */
        -moz-transition: opacity 1s; 
        -ms-transition: opacity1s; 
        -o-transition: opacity 1s; 
        transition: opacity  1s;
        z-index:2;

}

.carousel-fade .next {

    left:0;
    opacity:1;
    z-index:1;

}
1
Flavio Salas