My goal was to create a carousel that displays multiple images in one slide. However, I encountered an issue where once the fourth image is reached, the other three images are forcibly hidden. I want to give credit to the original creator of this code snippet at Bootstrap Codeply. I discovered this open source solution on Stackoverflow.
Here is the code snippet that I have put together so far:
let items = document.querySelectorAll('.multiple-carousel .items')
items.forEach((el) => {
const minPerSlide = 4
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
}
})@media (max-width: 767px) {
.multiple-carousel .carousel-inner .carousel-item > div {
display: none;
}
.multiple-carousel .carousel-inner .carousel-item > div:first-child {
display: block;
}
.multiple-carousel .carousel-inner .carousel-item.active,
.multiple-carousel .carousel-inner .carousel-item-next,
.multiple-carousel .carousel-inner .carousel-item-prev {
display: flex;
}
/* more CSS code here */