Why cloning carousel-item not working perfectly?

Question

I was trying to make a carousel that has multiple image in 1 slide. The thing is, when the image reached at 4, all 3 other image going to hide forcely. Special credit to this owner Bootstrap Codply, I found this open source here Stackoverflow.

This is the code I mixed up 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;
}

/* medium and up screens */
@media (min-width: 768px) {

    .multiple-carousel .carousel-inner .carousel-item-end.active,
    .multiple-carousel .carousel-inner .carousel-item-next {
        transform: translateX(25%);
    }

    .multiple-carousel .carousel-inner .carousel-item-start.active,
    .multiple-carousel .carousel-inner .carousel-item-prev {
        transform: translateX(-25%);
    }
}

.multiple-carousel .carousel-inner .carousel-item-end,
.multiple-carousel .carousel-inner .carousel-item-start {
    transform: translateX(0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container text-center my-3 multiple-carousel">
                            <div class="row mx-auto my-auto justify-content-center">
                                <div id="recipeCarousel" class="carousel slide" data-bs-ride="carousel">
                                    <div class="carousel-inner" role="listbox">
                                        <div class="carousel-item active items">
                                            <div class="col-md-3">
                                                <div class="card">
                                                    <div class="card-img">
                                                        <img src="//via.placeholder.com/500x400/e44?text=1" class="img-fluid">
                                                    </div>
                                                    <div class="card-img-overlay">picture 1</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="carousel-item items">
                                            <div class="col-md-3">
                                                <div class="card">
                                                    <div class="card-img">
                                                        <img src="//via.placeholder.com/500x400/e55?text=2" class="img-fluid">
                                                    </div>
                                                    <div class="card-img-overlay">picture 2</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="carousel-item items">
                                            <div class="col-md-3">
                                                <div class="card">
                                                    <div class="card-img">
                                                        <img src="//via.placeholder.com/500x400/e77?text=3" class="img-fluid">
                                                    </div>
                                                    <div class="card-img-overlay">picture 3</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="carousel-item">
                                            <div class="col-md-3">
                                                <div class="card">
                                                    <div class="card-img">
                                                        <img src="//via.placeholder.com/500x400/e66?text=4" class="img-fluid">
                                                    </div>
                                                    <div class="card-img-overlay">picture 4</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <a class="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="prev">
                                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    </a>
                                    <a class="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="next">
                                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    </a>
                                </div>
                            </div>
                        </div>

When I tried to edit the transform it makes more mess, same with const minPerslide where should I edit it?

Can u share a screenshot what exactly is happening? I have already answered but i will delete it if the code doesn't work! — Sanidhya, Apr 11 '22 at 07:55

score 0 · Answer 1 · answered Apr 11 '22 at 07:53

I think this code works:

let items = document.querySelectorAll('.carousel .carousel-item')

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

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>

<div class="container text-center my-3">
    <h2 class="font-weight-light">Bootstrap Multi Slide Carousel</h2>
    <div class="row mx-auto my-auto justify-content-center">
        <div id="recipeCarousel" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-img">
                                <img src="//via.placeholder.com/500x400/31f?text=1" class="img-fluid">
                            </div>
                            <div class="card-img-overlay">Slide 1</div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-img">
                                <img src="//via.placeholder.com/500x400/e66?text=2" class="img-fluid">
                            </div>
                            <div class="card-img-overlay">Slide 2</div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-img">
                                <img src="//via.placeholder.com/500x400/7d2?text=3" class="img-fluid">
                            </div>
                            <div class="card-img-overlay">Slide 3</div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-img">
                                <img src="//via.placeholder.com/500x400?text=4" class="img-fluid">
                            </div>
                            <div class="card-img-overlay">Slide 4</div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-img">
                                <img src="//via.placeholder.com/500x400/aba?text=5" class="img-fluid">
                            </div>
                            <div class="card-img-overlay">Slide 5</div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-img">
                                <img src="//via.placeholder.com/500x400/fc0?text=6" class="img-fluid">
                            </div>
                            <div class="card-img-overlay">Slide 6</div>
                        </div>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            </a>
            <a class="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
            </a>
        </div>
    </div>
    <h5 class="mt-2 fw-light">advances one slide at a time</h5>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/js/bootstrap.min.js"></script>

</body>
</html>

Good Luck :)

Why cloning carousel-item not working perfectly?

1 Answers1