Es posible aplicar vertical carrusel deslizante ancho Twitter Bootstrap?
En bootstrap.js me parece que este

  , 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 de dirección «arriba» y «abajo», pero de deslizamiento no funciona.

InformationsquelleAutor Qwadrat | 2012-07-21

3 Comentarios

  1. 42

    Sí.

    A continuación es un chapucero manera de hacerlo, que lo hace todo por simplemente reemplazar el CSS.

    Si agrega una clase vertical a tu menú, a continuación, agregar la siguiente regla CSS a la página anulará el deslizamiento a ser 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, tomando todo en carrusel.menos y el cambio de left a top.

    JSFiddle


    Este al menos indica lo que usted necesita hacer para conseguir que se deslice verticalmente. Sin embargo, en la práctica, realmente se debería agregar up y down clases a la carrusel.menos y añadir una nueva opción a bootstrap-carousel.js para cambiar entre ellos.

    • Gracias por la solución! Pero cuando usamos el comportamiento estándar de derecha a izquierda podemos ver tanto anterior y siguiente de imágenes en movimiento a la izquierda. Y cuando traté de usar su solución – sólo la siguiente imagen se mueve sobre la anterior. He intentado cambiar varias opciones en el css, pero no puedo lograr este efecto.
    • qué navegador están realizando pruebas en? Estaba trabajando para mí, pero sólo lo he probado en Chrome.
    • En Chrome todo está ok. En Firefox siguiente cuadro se mueve sobre la anterior. En Opera siguiente imagen en movimiento con los anteriores, pero stucks en segundo fotograma 🙂
    • parece que Firefox no como los valores de porcentaje para la top estilo. Si usted está usando imágenes de la misma altura, usted puede conseguir lejos con definir de forma explícita. Ver actualizado JSFiddle. No he probado esto en la Ópera.
    • En lo que he visto, Firefox no como la altura, porque ninguno de los contenedores tienen una altura fija. Si .carrusel.vertical tenía una altura fija, por lo que sería trabajar con porcentajes muy bien.
  2. 26

    Las soluciones proporcionadas en las respuestas anteriores no funcionan correctamente en algunos navegadores (Google Chrome) cuando se utiliza con el último (el actual), la versión de Bootstrap (v3.3.4).

    En caso de que alguien necesita una solución actualizada que trabaja con Bootstrap v3.3.4, aquí es —

    CSS:

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

    HTML:

    <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: agregar el vertical clase a su carousel-inner, o editar el CSS, como te gusta.

    • Excelente Respuesta; trabajó perfecto para la nueva versión & en Chrome; Gracias!
    • Funciona perfectamente! He hecho una demostración en bootply.com/goofy/9sNDKzKIoG.
    • Tener problemas en IE11. La nueva presentación de anima en ACEPTAR, pero las viejas diapositivas permanece estática en lugar de salir y que, finalmente, desaparece una vez que la nueva diapositiva se ha completado el viaje. Alguna idea? Muchas gracias.
    • Impresionante solución. Cualquier forma de mostrar más de 1 elemento en un tiempo ?

Dejar respuesta

Please enter your comment!
Please enter your name here