Bootstrap 5 Carousel 模式

Posted 2023-05-08

【中文标题】Bootstrap 5 Carousel 模式

【英文标题】：Bootstrap 5 Carousel in Modal

【发布时间】：2021-12-06 21:32:07

【问题描述】：

尝试实现一个图片库，点击缩略图将打开一个模态框，并且在模态框体内，可以循环显示图像的轮播。我无法获得下一个和上一个按钮来循环模式内我的 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>

【参考方案1】：

其中一些困难在于您将 Bootstrap 5 与 Bootstrap 3 命令混合使用。我的意思是，你提到使用 v5，但你确定吗？我问是因为您的代码中的 img-responsive 来自 v3，并且已经更改为 img-fluid。可能还有其他这种混合和匹配的实例，但我无法从我的脑海中发现它。此外，我查看了 Codepen 链接，但画廊根本不适合我，模式甚至无法打开。不确定它是否可靠。

【讨论】：

你好。感谢您的查看和您对此的帮助。我用 v5 启动了这个网站。我的女儿想为她的网站创建一个画廊，其中包含我正在尝试做的事情，而我发现的唯一可以在线执行此操作的代码是 v3 教程。我尽可能多地切换了命令，但看起来我需要重新检查它。不知道为什么CP不起作用。当我单击 Codepen 中的图像时，模式会激活。我检查了 Chrome 和 FF。

希望您会发现 Bootstrap 非常适合，但现在有 5 个不同的版本，有时很容易混淆它们。有些事情在各个版本中都可以正常工作，但并非所有事情。如果您能发现您使用的是哪个版本，那么应该很容易将您指向正确的文档。