Skip to main content
Origen Enlace
Miguel
  • 1.5k
  • 1
  • 21
  • 53

Carrousel Bootstrap 4

estoy poniendo un carrousel de Bootstrap 4 en mi web.

Pero quiero poner 6 elementos por página y no lo consigo.

El HTML

<div id="carouselExample" class="carouselPrograms carousel slide" data-ride="carousel" data-interval="false">
    <div class="carousel-inner row w-100 mx-auto" role="listbox">
    <div class="carousel-item col-md-3 center  active">
       <img src="images/maquinas/511.png" style="width: 95px;"></img>
       <h5>HIFU</h5>
     </div>
     <div class="carousel-item col-md-3 ">
       <img src="images/maquinas/411.png" style="width: 95px;"></img>
       <h5>Láser CO2</h5>
     </div>
     <div class="carousel-item col-md-3 ">
        <img src="images/maquinas/411.png" style="width: 95px;"></img>
        <h5>Láser CO2</h5>
      </div>
      <div class="carousel-item col-md-3 ">
        <img src="images/maquinas/411.png" style="width: 95px;"></img>
        <h5>Láser CO2</h5>
      </div>
      <div class="carousel-item col-md-3 ">
        <img src="images/maquinas/411.png" style="width: 95px;"></img>
        <h5>Láser CO2</h5>
      </div>
       <div class="carousel-item col-md-3 ">
        <img src="images/maquinas/411.png" style="width: 95px;"></img>
        <h5>Láser CO2</h5>
      </div>
       <div class="carousel-item col-md-3 ">
        <img src="images/maquinas/411.png" style="width: 95px;"></img>
        <h5>Láser CO2</h5>
      </div>
      <div class="carousel-item col-md-3  ">
        <img src="images/maquinas/411.png" style="width: 95px;"></img>
        <h5>Láser CO2</h5>
       </div>
      </div>
       <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
       </a>
       <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
       <span class="carousel-control-next-icon" aria-hidden="true"></span>
       <span class="sr-only">Next</span>
       </a>
     </div>

El CSS:

@media (min-width: 768px) {
    /* show 3 items */
    .carousel-inner .active,
    .carousel-inner .active + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item,
    .carousel-inner .active + .carousel-item + .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,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .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 + .carousel-item {
        position: absolute;
        top: 0;
        right: -25%;
        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,
    .carousel-item-next.carousel-item-left + .carousel-item + .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,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(50%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}

El JS:

$('#carouselExample').on('slide.bs.carousel', function (e) {
        var $e = $(e.relatedTarget);
        var idx = $e.index();
        var itemsPerSlide = 4;
        var totalItems = $('.carousel-item').length;

        if (idx >= totalItems-(itemsPerSlide-1)) {
            var it = itemsPerSlide - (totalItems - idx);
            for (var i=0; i<it; i++) {
                // append slides to end
                if (e.direction=="left") {
                    $('.carousel-item').eq(i).appendTo('.carousel-inner');
                }
                else {
                    $('.carousel-item').eq(0).appendTo('.carousel-inner');
                }
            }

Por lo que entiendo, si quiero que aparezcan 6 por página, tengo que cambiar la clase de los div por col-md-2, luego en el JavaScript cambiar el var itemsPerSlide = 6; y por último en el CSS en todos los que pone .carousel-item ir añadiendo uno más.

Pero cuando lo modifico solo me salen 2, alguna sugerencia de que hago mal???

Saludos } });