一个引导旋转木马错误地将照片与来自同一页的另一个引导旋转木马混合在一起

Question

我在同一个页面上添加了2个引导5旋转木马，为每个旋转木马添加了唯一的ID，但遗憾的是，第二个旋转木马将照片与第一个旋转木马混为一谈。它从上一张幻灯片中拍摄了2张照片。向每个旋转木马添加唯一的ID不会改变情况。

有解决办法吗？

我也查过这篇文章，但没什么用：How to place two bootstrap carousels in the same page?

<!-- Bootstrap carousel 1 -->
    <div class="container text-center my-3 mb-5">
                    <div class="row mx-auto my-auto justify-content-between">
                        <div id="Carousel-1" class="carousel slide" data-bs-ride="carousel">
                            <div class="carousel-inner" role="listbox">
                                <div class="carousel-item active">
                                    <div class="col-md-4">
                                        <div class="card">
                                            <div class="card-img">
                                                <img src="./images/person1.jpg" class="img-fluid">
                                            </div>
                                            <div class="card-img-overlay"><strong>John Smith</strong>
                                                <p class="mt-0 me-2" style="font-size: 13px;">Administration</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="carousel-item">
                                    <div class="col-md-4">
                                        <div class="card">
                                            <div class="card-img">
                                                <img src="./images/person2.jpg" class="img-fluid">
                                            </div>
                                            <div class="card-img-overlay"><strong>Sarah Smith</strong>
                                                <p class="mt-0 me-2" style="font-size: 13px;">Finance</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="carousel-item">
                                    <div class="col-md-4">
                                        <div class="card">
                                            <div class="card-img">
                                                <img src="./images/person3.jpg" class="img-fluid">
                                            </div>
                                            <div class="card-img-overlay"><strong>Roger Kensinghton</strong>
                                                <p class="mt-0 me-2" style="font-size: 13px;">Security</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="carousel-item">
                                    <div class="col-md-4">
                                        <div class="card">
                                            <div class="card-img">
                                                <img src="./images/person4.jpg" class="img-fluid">
                                            </div>
                                            <div class="card-img-overlay"><strong>Kelly Parker</strong>
                                                <p class="mt-0 me-2" style="font-size: 13px;">Design</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <a class="carousel-control-prev bg-transparent w-aut" href="#Carousel-1" 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="#Carousel-1" role="button" data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            </a>
                        </div>
                    </div>
                </div>

<!-- Bootstrap carousel 2 -->
    <div class="container text-center my-3 mb-5 carousel2">
                    <div class="row mx-auto my-auto justify-content-between">
                        <div id="Carousel-2" class="carousel slide" data-bs-ride="carousel">
                            <div class="carousel-inner" role="listbox">
                                <div class="carousel-item active">
                                    <div class="col-md-4">
                                        <div class="card">
                                            <div class="card-img">
                                                <img src="./images/woman1.jpg" class="img-fluid">
                                            </div>
                                            <div class="card-img-bottom"><strong>Jane Dow</strong>
                                                <p class="mt-0 me-2" style="font-size: 13px;">CEO AXA Group</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="carousel-item">
                                    <div class="col-md-4">
                                        <div class="card">
                                            <div class="card-img">
                                                <img src="./images/man1.jpg" class="img-fluid">
                                            </div>
                                            <div class="card-img-bottom"><strong>Dave Johnson</strong>
                                                <p class="mt-0 me-2" style="font-size: 13px;">Marketing Manager Johnson's & Co</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="carousel-item">
                                    <div class="col-md-4">
                                        <div class="card">
                                            <div class="card-img">
                                                <img src="./images/man2.jpg" class="img-fluid">
                                            </div>
                                            <div class="card-img-bottom"><strong>Roger Smith</strong>
                                                <p class="mt-0 me-2" style="font-size: 13px;">CEO Hi-Tech Intl.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="carousel-item">
                                    <div class="col-md-4">
                                        <div class="card">
                                            <div class="card-img">
                                                <img src="./images/woman2.jpg" class="img-fluid">
                                            </div>
                                            <div class="card-img-bottom"><strong>Diana Russel</strong>
                                                <p class="mt-0 me-2" style="font-size: 13px;">Manager Creativity Hub</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <a class="carousel-control-prev bg-transparent w-aut" href="#Carousel-2" 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="#Carousel-2" role="button" data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            </a>
                        </div>
                    </div>
                </div>

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

Answer 1

因为您使用的是.carousal选择器，而且类在这两个循环中都是存在的，所以使用id代替类#Carousel-1或#Carousel-2。

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