Twitter Bootstrap Karussell vertikal gleitend

Question

Ist es möglich, vertikale Karussell schieben Width Twitter Bootstrap zu implementieren? In bootstrap.js Ich finde diesen

, slide: function (type, next) { 
    var $active = this.$element.find('.active') 
    , $next = next || $active[type]() 
    , isCycling = this.interval 
    , direction = type == 'next' ? 'left' : 'right' 
    , fallback = type == 'next' ? 'first' : 'last' 
    , that = this 

Ich habe versucht, die Richtung zu ändern, um „nach oben“ und „unten“, sondern gleitenden nicht funktioniert.

Answer 1

Ja.

Unten ist ein hacky Weg, es zu tun, der alles durch einfaches Überschreiben der CSS tut.

Wenn Sie eine Klasse vertical zu Ihrem Karussell hinzufügen, dann auf der Seite die folgenden CSS werden das Hinzufügen außer Kraft setzen die vertikalen sein Gleiten:

.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 ist im Grunde nimmt alles in carousel.less und Wechsel left bis top.

JSFiddle

---

Das zumindest zeigt an, was Sie tun müssen, um es vertikal zu gleiten zu bekommen. Doch in der Praxis sollte man wirklich up und down Klassen zum carousel.less hinzufügen und eine neue Option bootstrap-carousel.js zwischen ihnen wechseln hinzuzufügen.

Answer 2

Versuchen Sie dieses Plugin Out https://github.com/tutorialdrive/Bootstrap-Vertical-Thumbnail-Carousel

Und hier einen Blick darauf werfen.

Twitter Bootstrap Vertical Thumbnail Carousel

Answer 3

Die Lösungen in den früheren Antworten bereitgestellt funktionieren nicht richtig auf einigen gängigen Browsern (wie Google Chrome), wenn sie mit der neuesten (aktuellen) Version von Bootstrap (v3.3.4) verwendet.

Falls jemand eine aktualisierte Lösung benötigt, die mit Bootstrap v3.3.4 funktioniert, hier ist es -

.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: auto; 
 
} 
 
.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%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 
<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.4/js/bootstrap.min.js"></script> 
 
<div style="width:600px"> <!-- wrap @img width --> 
 
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
     <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
     <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner vertical" role="listbox"> 
 
     <div class="item active"> 
 
     <img src="http://placehold.it/600x400&text=First+Slide" alt="First Slide"> 
 
     <div class="carousel-caption"> 
 
      First Slide 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="http://placehold.it/600x400&text=Second+Slide" alt="Second Slide"> 
 
     <div class="carousel-caption"> 
 
      Second Slide 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="http://placehold.it/600x400&text=Third+Slide" alt="Third Slide"> 
 
     <div class="carousel-caption"> 
 
      Third Slide 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
    </div> 
 
</div>

Hinweis: fügen Sie die vertical Klasse Ihren carousel-inner, oder bearbeiten Sie die CSS wie du magst.