i'm trying to make bootstrap 5 carousel with multi items. but in my code i could display 3 items at a time. how can make 6 items at a time. I try to change the value in JS code but there it doesn't work. Please correct my following so it could display 6 items at a time and can be vary later. here is complete code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style type="text/css">
body{
background: #f7f7;
}
@media (max-width: 767px) {
.carousel-inner .carousel-item > div {
display: none;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* medium and up screens */
@media (min-width: 768px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}
</style>
</head>
<body>
<div >
<div >
<div >
<div id="recipeCarousel" data-bs-ride="carousel">
<div role="listbox">
<div >
<div >
<div >
<div >
<img src="img/1.jpg" >
</div>
<div >Slide 1</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<img src="img/2.jpg" >
</div>
<div >Slide 2</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<img src="img/3.jpg" >
</div>
<div >Slide 3</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<img src="img/4.jpg" >
</div>
<div >Slide 4</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<img src="img/4.jpg" >
</div>
<div >Slide 4</div>
</div>
</div>
</div>
</div>
<a href="#recipeCarousel" role="button" data-bs-slide="prev">
<span aria-hidden="true"></span>
</a>
<a href="#recipeCarousel" role="button" data-bs-slide="next">
<span aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
let items = document.querySelectorAll('.carousel .carousel-item')
items.forEach((el) => {
const minPerSlide = 3
let next = el.nextElementSibling
for (var i=1; i<minPerSlide; i ) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
});
</script>
</body>
</html>
CodePudding user response：
Just change your bootstrap columns from col-md-4 to col-md-2 so that they can appear 6 columns per row and on your javascript code change minPerSlide to 6 Here is the code for you:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style type="text/css">
body{
background: #f7f7;
}
@media (max-width: 767px) {
.carousel-inner .carousel-item > div {
display: none;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* medium and up screens */
@media (min-width: 768px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}
</style>
</head>
<body>
<div >
<div >
<div >
<div id="recipeCarousel" data-bs-ride="carousel">
<div role="listbox">
<div >
<div >
<div >
<div >
<img src="img/1.jpg" >
</div>
<div >Slide 1</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<img src="img/2.jpg" >
</div>
<div >Slide 2</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<img src="img/3.jpg" >
</div>
<div >Slide 3</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<img src="img/4.jpg" >
</div>
<div >Slide 4</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<img src="img/4.jpg" >
</div>
<div >Slide 4</div>
</div>
</div>
</div>
</div>
<a href="#recipeCarousel" role="button" data-bs-slide="prev">
<span aria-hidden="true"></span>
</a>
<a href="#recipeCarousel" role="button" data-bs-slide="next">
<span aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
let items = document.querySelectorAll('.carousel .carousel-item')
items.forEach((el) => {
const minPerSlide = 6
let next = el.nextElementSibling
for (var i=1; i<minPerSlide; i ) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
});
</script>
</body>
</html>