Bootstrap carrusel múltiples marcos a la vez

Este es el efecto que bash lograr con el carrusel Bootstrap 3

enter image description here

En lugar de mostrar solo un fotogtwig a la vez, muestra N fotogtwigs deslizándose uno al lado del otro. Luego, cuando se desliza (o cuando se desliza automáticamente), cambia el grupo de diapositivas como lo hace.

¿Se puede hacer esto con el carrusel de bootstrap 3? Espero no tener que ir a buscar otro plugin jQuery …

¿Se puede hacer esto con el carrusel de bootstrap 3? Espero no tener que ir a buscar otro plugin jQuery

A partir del 2013-12-08, la respuesta es no. El efecto que está buscando no es posible utilizando el complemento de carrusel genérico de Bootstrap 3. Sin embargo, aquí hay un plugin jQuery simple que parece hacer exactamente lo que usted quiere http://sorgalla.com/jcarousel/

Actualización 2018

Bootstrap 4

El carrusel ha cambiado en 4.x, y las transiciones de animación de varias diapositivas pueden anularse así …

.carousel-inner .carousel-item-right.active, .carousel-inner .carousel-item-next { transform: translateX(33.33%); } .carousel-inner .carousel-item-left.active, .carousel-inner .carousel-item-prev { transform: translateX(-33.33%) } .carousel-inner .carousel-item-right, .carousel-inner .carousel-item-left{ transform: translateX(0); } 

Demostración de Bootstrap 4 Alpha.6
Bootstrap 4.0.0 (show 4, advance 1 a la vez)
Bootstrap 4.1.0 (avance los 4 a la vez)


Otra opción es un carrusel receptivo que solo muestra y avanza 1 diapositiva en pantallas más pequeñas. En lugar de clonar las diapositivas como en el ejemplo anterior, esta ajusta el CSS y usa jQuery solo para mover las diapositivas adicionales para permitir el ciclo continuo (ajuste):

No copie y pegue este código. Primero, entiende cómo funciona.

Bootstrap 4 Responsive (mostrar 3, 1 diapositiva en el móvil)

 @media (min-width: 768px) { /* show 3 items */ .carousel-inner .active, .carousel-inner .active + .carousel-item, .carousel-inner .active + .carousel-item + .carousel-item { display: block; } .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left), .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item, .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item { transition: none; } .carousel-inner .carousel-item-next, .carousel-inner .carousel-item-prev { position: relative; transform: translate3d(0, 0, 0); } .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item { position: absolute; top: 0; right: -33.3333%; z-index: -1; display: block; visibility: visible; } /* left or forward direction */ .active.carousel-item-left + .carousel-item-next.carousel-item-left, .carousel-item-next.carousel-item-left + .carousel-item, .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item, .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item { position: relative; transform: translate3d(-100%, 0, 0); visibility: visible; } /* farthest right hidden item must be abso position for animations */ .carousel-inner .carousel-item-prev.carousel-item-right { position: absolute; top: 0; left: 0; z-index: -1; display: block; visibility: visible; } /* right or prev direction */ .active.carousel-item-right + .carousel-item-prev.carousel-item-right, .carousel-item-prev.carousel-item-right + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item { position: relative; transform: translate3d(100%, 0, 0); visibility: visible; display: block; visibility: visible; } }  

Ejemplo: Bootstrap 4 receptivo (mostrar 4, 1 diapositiva en el móvil)


Bootstrap 3

Aquí hay un ejemplo 3.x en Bootply: http://bootply.com/89193

Debe poner una fila completa de imágenes en el elemento activo. Aquí hay otra versión que no astack las imágenes en anchos de pantalla más pequeños: http://bootply.com/92514

EDITAR Método alternativo para avanzar una diapositiva a la vez :

Use jQuery para clonar los siguientes elementos.

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

Y luego CSS para posicionar en consecuencia …

Antes de 3.3.1

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

Después de 3.3.1

 .carousel-inner .item.left.active { transform: translateX(-33%); } .carousel-inner .item.right.active { transform: translateX(33%); } .carousel-inner .item.next { transform: translateX(33%) } .carousel-inner .item.prev { transform: translateX(-33%) } .carousel-inner .item.right, .carousel-inner .item.left { transform: translateX(0); } 

Esto mostrará 3 a la vez, pero solo se desliza uno a la vez:

Demostración de Bootstrap 3.x


Por favor, no copie y pegue este código. Primero, entiende cómo funciona. Esta respuesta está aquí para ayudarlo a aprender .

Al duplicar este carrusel de bootstrap 4 modificado solo funciona la mitad correctamente (el bucle de desplazamiento deja de funcionar)
cómo hacer 2 controles deslizantes de arranque en una sola página sin mezclar sus CSS y jQuery?

Esta es una rutina de arranque de Twitter que funciona 3.

Aquí está el javascript :

 $('#myCarousel').carousel({ interval: 10000 }) $('.carousel .item').each(function(){ var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); if (next.next().length>0) { next.next().children(':first-child').clone().appendTo($(this)); } else { $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); } }); 

Y el CSS :

 .carousel-inner .active.left { left: -33%; } .carousel-inner .active.right { left: 33%; } .carousel-inner .next { left: 33% } .carousel-inner .prev { left: -33% } .carousel-control.left { background-image: none; } .carousel-control.right { background-image: none; } .carousel-inner .item { background: white; } 

Puedes verlo en acción en este Jsfiddle

La razón por la que agregué esta respuesta porque las otras no funcionan del todo. Encontré 2 errores dentro de ellos, uno de ellos fue que la flecha izquierda generó un efecto extraño y el otro fue sobre el texto en negrita en algunas situaciones que se puede resolver configurando el color de fondo para que el elemento inferior no sea visible mientras la transición efecto.

Todas las soluciones anteriores son hacky y con errores. Ni siquiera lo intentes. Usa otras libs. Lo mejor que he encontrado – http://sachinchoolur.github.io/lightslider Funciona muy bien con bootstrap, no agrega html basura, altamente configurable, receptivo, optimizado para dispositivos móviles, etc.

 $('.multi-item-carousel').lightSlider({ item: 4, pager: false, autoWidth: false, slideMargin: 0 }); 

Esto es lo que funcionó para mí. Muy simple jQuery y CSS para hacer carrusel sensible funciona independientemente de carruseles en la misma página. Altamente personalizable, pero básicamente un div con nowrap de espacio en blanco que contiene un grupo de elementos de bloque en línea y pone el último al principio para retroceder o el primero al final para avanzar. Gracias insertAfter !

 $('.carosel-control-right').click(function() { $(this).blur(); $(this).parent().find('.carosel-item').first().insertAfter($(this).parent().find('.carosel-item').last()); }); $('.carosel-control-left').click(function() { $(this).blur(); $(this).parent().find('.carosel-item').last().insertBefore($(this).parent().find('.carosel-item').first()); }); 
 @media (max-width: 300px) { .carosel-item { width: 100%; } } @media (min-width: 300px) { .carosel-item { width: 50%; } } @media (min-width: 500px) { .carosel-item { width: 33.333%; } } @media (min-width: 768px) { .carosel-item { width: 25%; } } .carosel { position: relative; background-color: #000; } .carosel-inner { white-space: nowrap; overflow: hidden; font-size: 0; } .carosel-item { display: inline-block; } .carosel-control { position: absolute; top: 50%; padding: 15px; box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.5); transform: translateY(-50%); border-radius: 50%; color: rgba(0, 0, 0, 0.5); font-size: 30px; display: inline-block; } .carosel-control-left { left: 15px; } .carosel-control-right { right: 15px; } .carosel-control:active, .carosel-control:hover { text-decoration: none; color: rgba(0, 0, 0, 0.8); } 
  

La respuesta más popular es correcta, pero creo que el código es inútilmente complicado. Con el mismo CSS, este código jquery es más fácil de entender, creo:

 $('#myCarousel').carousel({ interval: 10000 }) $('.carousel .item').each(function() { var item = $(this); item.siblings().each(function(index) { if (index < 4) { $(this).children(':first-child').clone().appendTo(item); } }); }); 

prueba esto … funciona en el mío … código:

  
  $('#carousel-example-generic').on('slid.bs.carousel', function () { $(".item.active:nth-child(" + ($(".carousel-inner .item").length -1) + ") + .item").insertBefore($(".item:first-child")); $(".item.active:last-child").insertBefore($(".item:first-child")); }); 
  .item.active, .item.active + .item, .item.active + .item + .item { width: 33.3%; display: block; float:left; } 
       

Tuve el mismo problema y las soluciones descritas aquí funcionaron bien. Pero quería apoyar los cambios en el tamaño de la ventana (y el diseño). El resultado es una pequeña biblioteca que resuelve todo el cálculo. Compruébelo aquí: https://github.com/SocialbitGmbH/BootstrapCarouselPageMerger

Para hacer que el script funcione, debe agregar un nuevo envoltorio

con la clase .item-content directamente en su .item

. Ejemplo:

  

Uso de esta biblioteca:

 socialbitBootstrapCarouselPageMerger.run('div.carousel'); 

Para cambiar la configuración:

 socialbitBootstrapCarouselPageMerger.settings.spaceCalculationFactor = 0.82; 

Ejemplo:

Como puede ver, el carrusel se actualiza para mostrar más controles cuando cambia el tamaño de la ventana. Consulte la configuración watchWindowSizeTimeout para controlar el tiempo de espera para reactjsr a los cambios en el tamaño de la ventana.

  .carousel-showsixmoveone .carousel-control { width: 4%; background-image: none; } .carousel-showsixmoveone .carousel-control.left { margin-left: 15px; } .carousel-showsixmoveone .carousel-control.right { margin-right: 15px; } .carousel-showsixmoveone .cloneditem-1, .carousel-showsixmoveone .cloneditem-2, .carousel-showsixmoveone .cloneditem-3, .carousel-showsixmoveone .cloneditem-4, .carousel-showsixmoveone .cloneditem-5 { display: none; } @media all and (min-width: 768px) { .carousel-showsixmoveone .carousel-inner > .active.left, .carousel-showsixmoveone .carousel-inner > .prev { left: -33.333%; } .carousel-showsixmoveone .carousel-inner > .active.right, .carousel-showsixmoveone .carousel-inner > .next { left: 33.333%; } .carousel-showsixmoveone .carousel-inner > .left, .carousel-showsixmoveone .carousel-inner > .prev.right, .carousel-showsixmoveone .carousel-inner > .active { left: 0; } .carousel-showsixmoveone .carousel-inner .cloneditem-1, .carousel-showsixmoveone .carousel-inner .cloneditem-2 { display: block; } } @media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) { .carousel-showsixmoveone .carousel-inner > .item.active.right, .carousel-showsixmoveone .carousel-inner > .item.next { -webkit-transform: translate3d(33.333%, 0, 0); transform: translate3d(33.333%, 0, 0); left: 0; } .carousel-showsixmoveone .carousel-inner > .item.active.left, .carousel-showsixmoveone .carousel-inner > .item.prev { -webkit-transform: translate3d(-33.333%, 0, 0); transform: translate3d(-33.333%, 0, 0); left: 0; } .carousel-showsixmoveone .carousel-inner > .item.left, .carousel-showsixmoveone .carousel-inner > .item.prev.right, .carousel-showsixmoveone .carousel-inner > .item.active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); left: 0; } } @media all and (min-width: 992px) { .carousel-showsixmoveone .carousel-inner > .active.left, .carousel-showsixmoveone .carousel-inner > .prev { left: -16.666%; } .carousel-showsixmoveone .carousel-inner > .active.right, .carousel-showsixmoveone .carousel-inner > .next { left: 16.666%; } .carousel-showsixmoveone .carousel-inner > .left, .carousel-showsixmoveone .carousel-inner > .prev.right, .carousel-showsixmoveone .carousel-inner > .active { left: 0; } .carousel-showsixmoveone .carousel-inner .cloneditem-3, .carousel-showsixmoveone .carousel-inner .cloneditem-4, .carousel-showsixmoveone .carousel-inner .cloneditem-5 { display: block; } } @media all and (min-width: 992px) and (transform-3d), all and (min-width: 992px) and (-webkit-transform-3d) { .carousel-showsixmoveone .carousel-inner > .item.active.right, .carousel-showsixmoveone .carousel-inner > .item.next { -webkit-transform: translate3d(16.666%, 0, 0); transform: translate3d(16.666%, 0, 0); left: 0; } .carousel-showsixmoveone .carousel-inner > .item.active.left, .carousel-showsixmoveone .carousel-inner > .item.prev { -webkit-transform: translate3d(-16.666%, 0, 0); transform: translate3d(-16.666%, 0, 0); left: 0; } .carousel-showsixmoveone .carousel-inner > .item.left, .carousel-showsixmoveone .carousel-inner > .item.prev.right, .carousel-showsixmoveone .carousel-inner > .item.active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); left: 0; } }  
   
 Try this code  

He visto su pregunta y sus respuestas, e hice un nuevo carrusel de artículos múltiples flexible y receptivo. puedes verlo aqui:

https://gist.github.com/IVIR3zaM/d143a361e61459146ae7c68ce86b066e

Puede agregar varias tags de entrada que tengan atributos como clase con el valor “carrusel-indicadores” y con datos-deslizar-a tenga valores secuenciales como 0 a 6 o 0 a 9.

de lo que necesita copiar y pegar el div que tiene atributo como clase con valor “elemento”.

Esto funciona para mí