Ahora me han implementado Twitter Bootstrap 3 Carousel que muestra un elemento y durante la transición, muestra el siguiente elemento, por lo que se ve:

 [1]    /transition/   [2]    /transition/   [3]   ...

Tengo que mostrar dos elementos y después de la transición de la pantalla el segundo elemento con el tercero:

[1][2]  /transition/  [2][3]  /transition/  [3][4] ...

Es aún posible lograr ?

Me han tratado de aplicar active clase a los dos elementos en la carga de la página, pero Carousel no funciona más. También el uso de las siguientes CSS no funciona:

.item.active + .item {
  display: block !important;
}
  • Está usted buscando algo como esto? bootply.com/78889
  • No, en absoluto, porque no son visibles [1][2] y, a continuación,[3][4]. Necesito mostrar [1][2], [2][3]
InformationsquelleAutor hsz | 2013-09-04

4 Comentarios

  1. 8

    Hsz de la solución funcionó bien hasta que Twitter Bootstrap 3.3, donde se agregó el soporte para 3D transformar la cual se anulan los estilos de transición (a la izquierda: el 50% y el de la izquierda: -50%)

    Por lo tanto, usted tiene que reemplazar Twitter Bootstrap defecto estilos de transición con el siguiente css:

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

    Puede que necesite cambiar el 50% 33% si 3 visualización de elementos, etc

    • cómo cambiaría su velocidad de la transición ?
  2. 1

    Solución es bastante simple.

    .item clase tiene dos tamaños de contenido – digamos 400px. .item-content ha 200px:

    <div class="carousel slide">
      <div class="carousel-inner">
        <div class="item active">
          <div class="item-content">ITEM 1</div>
        </div>
        <div class="item">
          <div class="item-content">ITEM 2</div>
        </div>
        <div class="item">
          <div class="item-content">ITEM 3</div>
        </div>
        <div class="item">
          <div class="item-content">ITEM 4</div>
        </div>
      </div>
    </div>

    Y CSS:

    .carousel .item {
      width: 400px;
    }
    .carousel .item .item-content {
      width: 200px;
    }

    Ahora tenemos que duplicar los siguientes elementos en una pantalla de dos elementos como [1][2] [2][3] [3][4] [4][1]

    $('.carousel .item').each(function(){
      var next = $(this).next();
      if (!next.length) {
        next = $(this).siblings(':first');
      }
      next.find('.item-content:first-child').clone().appendTo($(this));
    });

    Y modificar el carrusel de transición con:

    .carousel-inner .active.left { left: -50%; }
    .carousel-inner .next        { left:  50%; }

    Eso es todo.

  3. 1

    Sé que es un poco viejo, pero me las arreglé para resolver con,

    #carousel-galleries{
      .carousel-inner{
        .item{
          @media all and (transform-3d), (-webkit-transform-3d) {
            @include transition-transform(0.6s ease-in-out);
            @include backface-visibility(hidden);
            @include perspective(1000);
    
            &.next,
            &.active.right {
              @include translate3d(25%, 0, 0);
              left: 0;
            }
            &.prev,
            &.active.left {
              @include translate3d(-25%, 0, 0);
              left: 0;
            }
            &.next.left,
            &.prev.right,
            &.active {
              @include translate3d(0, 0, 0);
              left: 0;
            }
          }
        }
      }
    }

    Este es de 4 elementos adelantado por 1, bootstrap-sass 3.3.1 con brújula

  4. 0

    La respuesta anterior funciona bien, pero se rompe cuando hay un número impar de carrusel de elementos. He añadido un poco de jquery para hacer que funcione para los pares y los impares

    if ($(this).siblings(':last')) {
        $(this).siblings(':first').find('.item-content:first-child').clone().appendTo($(this));
    }
    else
    {
        next.find('.item-content:first-child').clone().appendTo($(this));   
    }

Dejar respuesta

Please enter your comment!
Please enter your name here