Twitter Bootstrap carosello verticale scorrevole

E 'possibile implementare lo scorrimento verticale del carosello widh Twitter Bootstrap? In bootstrap.js trovo questoTwitter Bootstrap carosello verticale scorrevole

, 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

Ho provato a cambiare direzione verso "su" e "giù", ma non scorrevole di lavoro.

fonte

2012-07-21 Qwadrat

Non pensare che sia possibile almeno senza modificare il codice. – Rohan

Ora è più semplice in Bootstrap 4: http://stackoverflow.com/questions/42910076/bootstrap-4-alpha-6-vertical-carousel/42911427 – ZimSystem

Sì.

Di seguito è un modo hacky per farlo, che fa tutto semplicemente ignorando il CSS.

Se si aggiunge una classe vertical alla giostra, quindi aggiungendo il seguente CSS alla pagina sovrascriverà lo scorrimento sia verticale:

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

Questo è fondamentalmente prendendo tutto in carousel.less e cambiando left a top.

JSFiddle

Questo almeno indica ciò che è necessario fare per ottenere lo scorrimento verticale. Tuttavia, in pratica, è necessario aggiungere le classi up e down allo carousel.less e aggiungere una nuova opzione a bootstrap-carousel.js per passare da una all'altra.

fonte

2012-07-22 00:42:36 merv

Grazie per la bella soluzione! Ma quando usiamo il comportamento standard da destra a sinistra - vediamo sia le immagini precedenti che quelle successive si spostano a sinistra. E quando ho provato ad usare la tua soluzione - solo la prossima immagine si spostava sul precedente. Ho provato a cambiare varie opzioni in css ma non posso ottenere questo effetto. – Qwadrat

@Qwadrat su quale browser stai testando? Stava funzionando per me, ma l'ho provato solo in Chrome. – merv

In Chrome tutto è ok. In Firefox, il prossimo frame si sposta rispetto al precedente. In Opera l'immagine successiva si muove con il precedente ma si ferma sul secondo fotogramma :) – Qwadrat

provare questo plugin https://github.com/tutorialdrive/Bootstrap-Vertical-Thumbnail-Carousel

e dare un'occhiata qui.

Twitter Bootstrap Vertical Thumbnail Carousel

fonte

2013-11-19 09:04:52

Le soluzioni fornite nelle risposte precedenti non funzionano correttamente su alcuni browser più diffusi (come Google Chrome) se utilizzato con l'ultima versione (corrente) dei Bootstrap (v3.3.4).

Nel caso in cui qualcuno ha bisogno di una soluzione aggiornata che funziona con Bootstrap v3.3.4, qui è -

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

Nota: aggiungere la classe vertical al carousel-inner, o modificare la CSS come ti piace

fonte

2015-05-19 15:47:32

Ottima risposta; ha funzionato perfettamente per la nuova versione e in Chrome; Grazie! – Catto

Funziona perfettamente! Ho fatto una demo su http://www.bootply.com/goofy/9sNDKzKIoG. – Goofy

Problemi con IE11. La nuova diapositiva si anima in OK, ma la vecchia diapositiva rimane statica anziché lasciare e alla fine scompare una volta che la nuova diapositiva ha completato il viaggio. Qualche idea? Grazie molto. – Noobie3001

Twitter Bootstrap carosello verticale scorrevole

risposta

Sì.

JSFiddle

Problemi correlati