Bootstrap 4 Multiple Items Carousel (varios elementos del carrusel se muestran a la vez)

Solución:

Puede mostrar un elemento de carrusel a la vez, pero rellénelo con varios elementos. Algo como:

.item
  .col-xs-4
     {content}
  .col-xs-4
     {content}
  .col-xs-4
     {content}

Pero entonces puede desear poder avanzarlos uno a la vez. Eso no va a suceder con bootstrap nada más sacarlo de la caja. Después de implementar muchos carruseles, recomendaría buscar otra biblioteca de carrusel cuando Bootstrap no se ajuste a los requisitos. Slick.js es mi biblioteca de referencia para muchas opciones de configuración de carrusel. Y es bastante delgado ~ 5k min y gzip.

Si está decidido a usar bootstrap, aquí hay un script que puede proporcionar un solo avance, múltiples elementos: http://codepen.io/MarkitDigital/pen/ZpEByz

Actualización de 2019 para Bootstrap 4

He hecho esto usando la cuadrícula Bootstrap 4 con columnas separadas para cada elemento del carrusel. Si desea avanzar solo un elemento a la vez, la secuencia de comandos puede ser algo como esto que clona las diapositivas en cada elemento del carrusel.

(function($) {
    "use strict";

    $('.carousel .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));
      }
    });

})(jQuery); 

Múltiples elementos:
http://codeply.com/go/WEbiqQvGhy

Varios elementos, mueva uno a la vez:
http://codeply.com/go/FrzoIEKCdH (Bootstrap 4 alpha)
http://codeply.com/go/3EQkUOhhZz (Bootstrap 4.0.0)

Responde 3 elementos en grande (1 a la vez), 1 elemento en más pequeño:
http://codeply.com/go/s3I9ivCBYH

---

Ver también: https://stackoverflow.com/a/20008623/171456

---

---

Utiliza Nuestro Buscador