jquery - multiple - carousel bootstrap responsive
Twitter Bootstrap carrusel deslizamiento vertical (3)
¿Es posible implementar un carrusel vertical deslizante con Twitter Bootstrap? En bootstrap.js encuentro esto
, 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
Traté de cambiar la dirección a "arriba" y "abajo", pero no funcionaba.
Sí.
A continuación se muestra una forma ingeniosa de hacerlo, que hace todo simplemente reemplazando el CSS.
Si agrega una clase vertical a su carrusel, agregar el siguiente CSS a la página anulará el deslizamiento para que sea vertical:
.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;
}
Esto es básicamente tomar todo en carrusel.less y cambiar de left a top .
JSFiddle
Esto al menos indica lo que debe hacer para que se deslice verticalmente. Sin embargo, en la práctica, uno realmente debería agregar clases up y down al carousel.less y agregar una nueva opción a bootstrap-carousel.js para alternar entre ellas.
Las soluciones proporcionadas en las respuestas anteriores no funcionan correctamente en algunos navegadores populares (como Google Chrome) cuando se utilizan con la última versión (actual) de Bootstrap (v3.3.4).
En caso de que alguien necesite una solución actualizada que funcione con Bootstrap v3.3.4, aquí está:
.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: agregue la clase vertical a su carousel-inner o edite el CSS como desee.
Pruebe este complemento https://github.com/tutorialdrive/Bootstrap-Vertical-Thumbnail-Carousel
Y echa un vistazo aquí.