Ich hatte die Fade-Übergang in einem Bootstrap 3 Build für eine Weile arbeiten, aber ich änderte nur den Aufruf von einer lokal gehaltenen Kopie des Bootstrap .min.css (Bootstrap v3.1.1) zu <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> und der Überblendungsübergang funktioniert nicht mehr. Es springt einfach zur nächsten Folie. Kein Übergang überhaupt.Bootstrap-Karussell-Fade funktioniert nicht mehr mit maxcdn 3.3.bootstrap.min.css
Ich habe versucht, die ID des Karussells hinzufügen, aber das hat nicht funktioniert.
<div id="myCarousel" class="carousel carousel-fade slide " data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
usw.
Die CSS ist:
.carousel-fade .item {
-webkit-transition: opacity 3s;
-moz-transition: opacity 3s;
-ms-transition: opacity 3s;
-o-transition: opacity 3s;
transition: opacity 3s;
}
.carousel-fade .active.left {left:0;opacity:0;z-index:2;}
.carousel-fade .next {left:0;opacity:1;z-index:1;}
[BTW:. Als ich #myCarousel setzen vor diesen wird standardmäßig die Folienübergang]
Sie können siehe hier eine Version mit dem CSS maxcdn v3.3.0 hier: bizharbour.net/projects/jambalaya/index.html
Die eine, die den Anruf zu der lokal gehaltenen v3.1.1 css verwendet, ist hier: bizharbour.net/projects/jambalaya/crewed-yacht-charter-sample-menu.html Die Überblendung arbeitet an dieser.
Eine andere Sache, die ich geändert habe, ist der Aufruf an jquery und bootstrap js-Datei. Ich verwende jetzt:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
Früher war ich mit:
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
Die lokale bootstrap.js ist v3.1.1 die Bootstrap beinhaltet: transition.js v3.1.1, ob das etwas bedeutet.
Wie bekomme ich das Karussell in Bootstrap 3.3.0, um den Karussell-Übergang zu erkennen?
Danke für jede Hilfe.
Cheers, Tracy
Die Bootstrap CSS-Regeln nehmen höhere Priorität als bei Ihnen. Du brauchst etwas, das ".carousel-inner> .item" schlägt. Versuchen Sie '.carousel-fade> .carousel-inner> .item' – Phil
Hallo Phil, Danke für die Hilfe. Ich habe die Linie wie vorgeschlagen geändert und habe ein wenig Fortschritte gemacht. Wenn ich es in Firefox anschaue, startet die Folie den Übergangsübergang, aber die nächste Folie erscheint nur. Sie können auf der 'bizharbour.net/projects/jambalaya/index.html' sehen. Ich habe auch versucht, '.carousel-fade> .carousel-inner> .item.active' hinzuzufügen, aber das machte keinen Unterschied. Wenn ich es Safari sehe, gibt es keinen Unterschied, nur die Folien ohne Übergang oder den Standard-Folienübergang zu tauschen. Also, richtige Richtung, aber immer noch etwas fehlt. Irgendwelche Ideen? –
Sie müssen sich die aktuellen Bootstrap-Stile für das Karussell ansehen und alles überschreiben, was Sie für einen Übergang benötigen. Siehe https://github.com/twbs/bootstrap/blob/v3.3.0/less/carousel.less – Phil