0

尝试实现一个图像库，单击缩略图将打开一个模态，并且在模态体内，可以循环显示图像的轮播。我无法获得下一个和上一个按钮来循环模式内我的 Bootstrap 5 轮播中的图像。我是一名没有正式知识的卧室编码员，但喜欢将代码放在一起并看到它在网页上活跃起来。

我尝试过的和我的代码：
CODEPEN

                                <!-- #image-1 -->
                                <div class="item" id="image-1">
                                    <img class="thumbnail img-responsive" title="Image 11" src="https://picsum.photos/id/237/200/300">
                                </div>


                                <!-- #image-2 -->
                                <div class="item" id="image-2">
                                    <img class="thumbnail img-responsive" title="Image 21" src="https://via.placeholder.com/728x590.png">
                                </div>


                                <!-- #image-3-->
                                <div class="item" id="image-3">
                                    <img class="thumbnail img-responsive" title="Image 31" src="https://via.placeholder.com/628x490.png">
                                </div>
                                
                                <!-- #image-4-->
                                <div class="item" id="image-4">
                                    <img class="thumbnail img-responsive" title="Image 41" src="https://baconmockup.com/500/300">
                                </div>
                            
                                <!-- #image-5-->
                                <div class="item" id="image-5">
                                    <img class="thumbnail img-responsive" title="Image 51" src="https://baconmockup.com/550/350">
                                </div>
                            
                                <!-- #image-6-->
                                <div class="item" id="image-6">
                                    <img class="thumbnail img-responsive" title="Image 61" src="https://baconmockup.com/450/350">
                                </div>
                            

                        </div>
                      <div class="modal fade" id="modal-gallery" role="dialog">
                      <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                          <div class="modal-header">
                              <h3 class="modal-title"></h3>
                              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>                                                                
                          </div>
                          <div class="modal-body">
                              <div id="modal-carousel" class="carousel slide" data-bs-ride="carousel">

                                <div class="carousel-inner">  
                                    
                                </div>
                                  
                                  <button class="carousel-control-prev" type="button" href="#modal-carousel" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Previous</span>
                                  </button>
                                  <button class="carousel-control-next" type="button" href="#modal-carousel" data-bs-target="#carouselExampleControls" data-bs-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Next</span>
                                  </button

                                
                              </div>
                          </div>
                          <div class="modal-footer">
                              <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>                                
                          </div>
                    </div>
                  </div>
                </div>
                    </div>
                </div>
4

0 回答 0