Befestigung des vertikalen Bootstrap Karussells auf Chrom, dh und Kante

Question

Ich baue gerade eine Website, die ein Karussell enthält, das vertikal durch seine Elemente gleiten sollte. Zur Zeit funktioniert es einwandfrei und wie es sollte, wenn ich Firefox benutze, aber wenn ich es mit Chrome oder Internet Explorer teste, funktioniert der Übergang nicht so, wie es sollte. Ich testete verschiedene Lösungen, die ich hier und auf anderen Seiten finden konnte, aber nichts davon funktionierte für mich.

 <div id="brick-slider" class="carousel vertical slide first-item" data-ride="carousel"> 
<ol class="carousel-indicators"> 
    {% for item in items %} 
    {% if loop.index0 == 0 %} 
     <li class="indicator" data-target="#brick-slider" data-slide-to="{{ loop.index0 }}" class="active"></li> 
    {% else %} 
     <li class="indicator" data-target="#brick-slider" data-slide-to="{{ loop.index0 }}"></li> 
    {% endif %} 
    {% endfor %} 
</ol> 
<div class="carousel-inner vertical" role="listbox"> 
    {% for item in items %} 
    {% if loop.index0 == 0 %} 
     <div class="item active"> 
     {{ item.content }} 
     </div> 
    {% else %} 
     <div class="item"> 
     {{ item.content }} 
     </div> 
    {% endif %} 
    {% endfor %} 
</div> 
    <a class="up carousel-control" href="#brick-slider" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="down carousel-control" href="#brick-slider" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 

Das ist mein Markup. Es folgen zwei Varianten des CSS, die ich vertikal durchfuhr.

.vertical .carousel-inner { 
    height: 100%; 
} 

.carousel.vertical .item { 
    -webkit-transition: 0.6s ease-in-out top; 
    -moz-transition: 0.6s ease-in-out top; 
     -ms-transition: 0.6s ease-in-out top; 
     -o-transition: 0.6s ease-in-out top; 
      transition: 0.6s ease-in-out top; 
} 

.carousel.vertical .active { 
    top: 0; 
} 

.carousel.vertical .next { 
    top: 100%; 
} 

.carousel.vertical .prev { 
    top: -100%; 
} 

.carousel.vertical .next.left, 
.carousel.vertical .prev.right { 
    top: 0; 
} 

.carousel.vertical .active.left { 
    top: -100%; 
} 

.carousel.vertical .active.right { 
    top: 100%; 
} 

.carousel.vertical .item { 
    left: 0; 
}​ 

Dies war die erste Variante, die ich verwendet habe. In Firefox funktionierte es gut, aber in Chrome und Edge rutschte das aktive Element nicht heraus, es verschwand einfach und dann kam das nächste Element zum Vorschein. Ich möchte, dass das aktive Element leichter wird, so dass Sie den Übergang wie beim Standard sehen können horizontales Karussell im Bootstrap.

.carousel-inner.vertical { 
    height: 100%; 
} 

.carousel-inner.vertical .item { 
    -webkit-transition: .6s ease-in-out top; 
    -o-transition: .6s ease-in-out top; 
    transition: .6s ease-in-out top; 
} 

@media all and (transform-3d), (-webkit-transform-3d) { 
    .carousel-inner.vertical .item { 
     -webkit-transition: -webkit-transform .6s ease-in-out; 
     -o-transition: -o-transform .6s ease-in-out; 
     transition: transform .6s ease-in-out; 
     -webkit-backface-visibility: hidden; 
     backface-visibility: hidden; 
     -webkit-perspective: 1000; 
     perspective: 1000; 
} 

.carousel-inner.vertical .item.next, .carousel-inner.vertical 
.item.active.right { 
    top: 0; 
    -webkit-transform: translate3d(0, 100%, 0); 
    transform: translate3d(0, 100%, 0); 
} 

.carousel-inner.vertical .item.prev, .carousel-inner.vertical 
.item.active.left { 
    top: 0; 
    -webkit-transform: translate3d(0, -100%, 0); 
    transform: translate3d(0, -100%, 0); 
} 

.carousel-inner.vertical .item.next.left, .carousel-inner.vertical .item.prev.right, .carousel-inner.vertical > .item.active { 
    top: 0; 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    } 
} 

.carousel-inner.vertical .active { 
    top: 0; 
} 

.carousel-inner.vertical .next, .carousel-inner.vertical .prev { 
    top: 0; 
    height: 100%; 
    width: 100%; 
} 

.carousel-inner.vertical .next { 
    left: 0; 
    top: 100%; 
} 

.carousel-inner.vertical .prev { 
    left: 0; 
    top: -100% 
} 

.carousel-inner.vertical .next.left, .carousel-inner.vertical .prev.right { 
    top: 0; 
} 

.carousel-inner.vertical .active.left { 
    left: 0; 
    top: -100%; 
} 

.carousel-inner.vertical .active.right { 
    left: 0; 
    top: 100%; 
} 

Mit dieser zweiten Variante, dass ich here seine genau das gleiche für Firefox gefunden, es funktioniert ganz gut und genau das tut, was es soll. Wie bei Edge und Chrome erleichtert es jetzt das nächste Element über dem aktiven Element, und dann verschwindet das aktive Element. Manchmal kommt es sogar hinter dem aktiven Element zum Vorschein und manchmal löst es sich von den Seiten statt von oben oder unten. Ich vermisse etwas, aber ich komme einfach nicht dahinter. Ich arbeite jetzt schon seit einiger Zeit daran, also würde ich mich über Hilfe sehr freuen.

Answer 1

Ich hatte das gleiche Problem, im Moment versucht bootstrap v3.02 und es hat gut funktioniert. Gefunden den Unterschied, bootstrap 3.6 verwendet 3d transformieren, und das funktioniert gut mit normalen horizontalen Karussell, aber es ist einfach nicht mit vertikalen, also überschreiben Sie einfach das Stück Code in Ihrem CSS, vor vertikalen Schieberegler CSS-Regeln, setzen Sie dies :

@media all and (transform-3d), (-webkit-transform-3d) { 
    .carousel-inner > .item { 
    -webkit-transition: none; 
     -o-transition: none; 
      transition: none; 
    } 
    .carousel-inner > .item.next, 
    .carousel-inner > .item.active.right { 
    left: 0; 
    -webkit-transform: none; 
      transform: none; 
    } 
    .carousel-inner > .item.prev, 
    .carousel-inner > .item.active.left { 
    left: 0; 
    -webkit-transform: none; 
      transform: none; 
    } 
    .carousel-inner > .item.next.left, 
    .carousel-inner > .item.prev.right, 
    .carousel-inner > .item.active { 
    left: 0; 
    -webkit-transform: none; 
      transform: none; 
    } 
} 

Danach geht Teil css für das Darstellen des vertikalen Karussells. Das hat für mich funktioniert.