Bootstrap 5 旋转木马在幻灯片事件中折叠

Question

I am trying to get a bootstrap 5 carousel with collapse outside the carousel going but I'm stuck on the java script part. I am a absolute beginner and not sure how to solve this problem.

I made a console log to see if I have the carousel slides and yes this is working. I can get the collapse working. because of "SyntaxError: Document.querySelector: '[object HTMLDivElement]' is not a valid selector".

Any help would be appreciated.

 document.getElementById("carouselExampleControls"); document.addEventListener("slide.bs.carousel", function (e) { console.log(e.relatedTarget); }); document.getElementById("carouselExampleControls"); document.addEventListener("slide.bs.carousel", function (e) { var forSlide = document.querySelector( ".for-slide-" + document.querySelector(e.relatedTarget).index() ); if (.forSlide.classList.contains("in")) { document.querySelector("#collapseGroup>.collapse.in");collapse("hide"). forSlide;collapse("show"); } });

 @import url(https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css); .img0 { height: 300px; width: 400px; background-color: blue; position: relative; }.img1 { height: 300px; width: 400px; background-color: green; position: relative; }.img2 { height: 300px; width: 400px; background-color: red; position: relative; }.img3 { height: 300px; width: 400px; background-color: purple; position: relative; }.description-group { border: 1px solid red; }.textarea { margin: 20px 50px; color: black; }

 <div class="container mt-4"> <div class="row row-flex"> <div class="col-md-4"> <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-indicators"> <a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></a> <a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="1" aria-label="Slide 2"></a> <a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="2" aria-label="Slide 3"></a> <a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="3" aria-label="Slide 4"></a> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img src="..." class="d-block w-100 img0" alt="Slide 0"> <div class="carousel-caption d-none d-md-block"> <h5>Caption 0</h5> </div> </div> <div class="carousel-item"> <img src="..." class="d-block w-100 img1" alt="Slide 1"> <div class="carousel-caption d-none d-md-block"> <h5>Caption 1</h5> </div> </div> <div class="carousel-item"> <img src="..." class="d-block w-100 img2" alt="Slide 2"> <div class="carousel-caption d-none d-md-block"> <h5>Caption 2</h5> </div> </div> <div class="carousel-item"> <img src="..." class="d-block w-100 img3" alt="Slide 3"> <div class="carousel-caption d-none d-md-block"> <h5>Caption 3</h5> </div> </div> </div> <:-- Controls --> <a class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </a> <a class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </a> </div> </div> <div class="col-md-8 description-group"> <div id="collapseGroup"> <div class="collapse for-slide-0 in"> <div class="card card-body"> <div class="textarea"> <h3>Text for Slide 0</h3> </div> </div> </div> <div class="collapse for-slide-1"> <div class="card card-body"> <div class="textarea"> <h3>Text for Slides 1</h3> </div> </div> </div> <div class="collapse for-slide-2"> <div class="card card-body"> <div class="textarea"> <h3>Text for Slide 2</h3> </div> </div> </div> <div class="collapse for-slide-3"> <div class="card card-body"> <div class="textarea"> <h3>Text for Slide 3</h3> </div> </div> </div> </div> </div> </div> </div> <.-- JavaScript Bundle with Popper --> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

Answer 1

You probably want to refer to the correct slide from carousel item. You can get index of current targetElement node using indexOf . However the collapse part still doesn't work need to fix the markup.

 document.addEventListener("slide.bs.carousel", function(e) { var child = e.relatedTarget var index = [].indexOf.call(child.parentNode.children, child); var forSlide = document.querySelector(".for-slide-" + index); console.log("should show collapse " + forSlide.innerText.trim()) return; // check your collapse code currently doesn't work if (.forSlide.classList.contains("in")) { document.querySelector("#collapseGroup>.collapse.show");collapse("hide"). forSlide;collapse("show"); } });

 @import url(https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css); .img0 { height: 300px; width: 400px; background-color: blue; position: relative; }.img1 { height: 300px; width: 400px; background-color: green; position: relative; }.img2 { height: 300px; width: 400px; background-color: red; position: relative; }.img3 { height: 300px; width: 400px; background-color: purple; position: relative; }.description-group { border: 1px solid red; }.textarea { margin: 20px 50px; color: black; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> <div class="container mt-4"> <div class="row row-flex"> <div class="col-md-4"> <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-indicators"> <a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></a> <a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="1" aria-label="Slide 2"></a> <a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="2" aria-label="Slide 3"></a> <a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="3" aria-label="Slide 4"></a> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img src="..." class="d-block w-100 img0" alt="Slide 0"> <div class="carousel-caption d-none d-md-block"> <h5>Caption 0</h5> </div> </div> <div class="carousel-item"> <img src="..." class="d-block w-100 img1" alt="Slide 1"> <div class="carousel-caption d-none d-md-block"> <h5>Caption 1</h5> </div> </div> <div class="carousel-item"> <img src="..." class="d-block w-100 img2" alt="Slide 2"> <div class="carousel-caption d-none d-md-block"> <h5>Caption 2</h5> </div> </div> <div class="carousel-item"> <img src="..." class="d-block w-100 img3" alt="Slide 3"> <div class="carousel-caption d-none d-md-block"> <h5>Caption 3</h5> </div> </div> </div> <:-- Controls --> <a class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </a> <a class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </a> </div> </div> <div class="col-md-8 description-group"> <div id="collapseGroup"> <div class="collapse for-slide-0 show in"> <div class="card card-body"> <div class="textarea"> <h3>Text for Slide 0</h3> </div> </div> </div> <div class="collapse for-slide-1"> <div class="card card-body"> <div class="textarea"> <h3>Text for Slides 1</h3> </div> </div> </div> <div class="collapse for-slide-2"> <div class="card card-body"> <div class="textarea"> <h3>Text for Slide 2</h3> </div> </div> </div> <div class="collapse for-slide-3"> <div class="card card-body"> <div class="textarea"> <h3>Text for Slide 3</h3> </div> </div> </div> </div> </div> </div> </div> <.-- JavaScript Bundle with Popper --> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>