0

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 } });

3
  • Cuando estás hablando de 6 elementos por página, ¿te refieres a 6 elementos dentro de un item de carrusel (<div class="carousel-item">...</div>)? Commented el 6 nov. 2019 a las 14:54
  • Estaría bien que pongas el enlace del sitio donde has sacado el carousel. Por si alguien quiere comparar el código etc... Y si ademas metes el código en un snippet ayudas a que te podamos ayudar.
    – x3k
    Commented el 6 nov. 2019 a las 15:13
  • ¿Deseas tener múltiples items en un slide? Es lo que entiendo de tu pregunta. El componente de Carousel de Bootstrap por sí solo no tiene dicha funcionalidad. Y el poco código que has compartido no es suficiente para ver exactamente lo que deseas lograr, aparte de tener algunos errores. Creo que deberías ser más específico en lo que deseas lograr para poder ayudarte. Dices que deseas 6 items por slide, pero ¿van a paginar de 6 en 6 en grupo? ¿O quizás de a 1 en 1, siempre mostrando 6 en pantalla? Son aspectos fundamentales para poder orientarte en cómo lograrlo. Saludos Commented el 9 nov. 2019 a las 17:08

1 respuesta 1

0

En mi archivo base del sistema que esta en desarrollo yo tengo así:

<html>
    <link rel="stylesheet" href="css/stylopersonal.css">
    <link rel="stylesheet" href="librerias_auxiliares/Bootstrap/css/carousel.css">
    <!-- CSS Compilado y minified Bootstrap  -->
    <link rel="stylesheet" href="librerias_auxiliares/Bootstrap/css/bootstrap.min.css">
    <!-- JS Libreria Minified  -->
    <script src="librerias_auxiliares/Bootstrap/js/jquery.min.js"></script>
    <!-- JavaScript Compilado and minified Bootstrap -->
    <script src="librerias_auxiliares/Bootstrap/js/bootstrap.min.js" ></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#myCarousel").carousel({  //<<--Con esto inicializas //
                   interval : 8000,
                   pause: false
            });
        });
    </script>

Después tengo un login (No se muestra el codigo) y posteriormente indico las imágenes que van a pasar por el carrusel:

<div class="col-md-8 banner-sec">
                    <div id="myCarousel" class="carousel slide" data-ride="carousel">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#myCarousel" data-slide-to="1"></li>
                            <li data-target="#myCarousel" data-slide-to="2"></li>
                            <li data-target="#myCarousel" data-slide-to="3"></li>
                            <li data-target="#myCarousel" data-slide-to="4"></li>
                            <li data-target="#myCarousel" data-slide-to="5"></li>
                        </ol>

                    <div class="carousel-inner">
                    <div class="item active">
                        <img  class="d-block w-100" src="imagenes/carousel/2714998_1280.jpg" alt="">
                    </div>
                    <div class="item">
                        <img class="d-block w-100" src="imagenes/carousel/1866844_1280.jpg" alt="">
                    </div>
                    <div class="item">
                        <img class="d-block w-100" src="imagenes/carousel/3425452_1280.jpg" alt="">
                    </div>
                    <div class="item">
                        <img class="d-block w-100" src="imagenes/carousel/441989_1280.jpg" alt="">
                    </div>
                    <div class="item">
                        <img class="d-block w-100" src="imagenes/carousel/3425656_1280.jpg" alt="">
                    </div>
                    <div class="item">
                        <img class="d-block w-100" src="imagenes/carousel/1285186_1280.jpg" alt="">
                    </div>
                    </div> 
                   </div>   
              </div>

En el CSS tengo estas lineas:

.container {
    margin-top: 20px;
}

/* Carousel Styles */
.carousel-indicators .active {
    background-color: #2980b9;
}

.carousel-inner img {
    width: 100%;
    max-height: 460px
}

.carousel-control {
    width: 0;
}

.carousel-control.left,
.carousel-control.right {
    opacity: 1;
    filter: alpha(opacity=100);
    background-image: none;
    background-repeat: no-repeat;
    text-shadow: none;
}

.carousel-control.left span {
    padding: 15px;
}

.carousel-control.right span {
    padding: 15px;
}

.carousel-control .glyphicon-chevron-left, 
.carousel-control .glyphicon-chevron-right, 
.carousel-control .icon-prev, 
.carousel-control .icon-next {
    position: absolute;
    top: 45%;
    z-index: 5;
    display: inline-block;
}

.carousel-control .glyphicon-chevron-left,
.carousel-control .icon-prev {
    left: 0;
}

.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-next {
    right: 0;
}

.carousel-control.left span,
.carousel-control.right span {
    background-color: #000;
}

.carousel-control.left span:hover,
.carousel-control.right span:hover {
    opacity: .7;
    filter: alpha(opacity=70);
}

/* Carousel Header Styles */
.header-text {
    position: absolute;
    top: 20%;
    left: 1.8%;
    right: auto;
    width: 96.66666666666666%;
    color: #fff;
    
}

.header-text h2 {
    font-size: 40px;

    color: #2980b9;
}

.header-text h2 span {
    
    background-color: #f7f7f7;
        opacity:0.5;
    padding: 20px;
}

.header-text h3 span {
    background-color: #000;
        opacity:1;
    padding: 15px;
}

.btn-min-block {
    min-width: 170px;
    line-height: 26px;
}

.btn-theme {
    color: #fff;
    background-color: transparent;
    border: 2px solid #fff;
    margin-right: 15px;
}

.btn-theme:hover {
    color: #000;
    background-color: #fff;
    border-color: #fff;
}

Y con esto me funciona sin mayor problema, es lo mas básico que pude hacer en base a la documentación de Boostrap 4 y ejemplos que busque en Internet. Haber si te sirve como referencia y puedas solucionar el inconveniente que tienes.

Saludos

P.D. Despues de leer detenidamente, entendi que quieres meter 6 imagenes por slide ? este codigo solo es para poner una imagen por cada slide. Quizas debas de probar primero que te funcione cada slide con una imagen, y luego ya ir metiendo el resto.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.