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 } });
<div class="carousel-item">...</div>
)?items
porslide
, 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