Блог

Пытаюсь создать галерею изображений, где щелчок по миниатюре откроет модальное изображение, а внутри модального тела доступна карусель изображений для циклического просмотра. Я не могу заставить кнопки «Следующий» и «предыдущий» переключать изображения внутри моей карусели Bootstrap 5 внутри модального. Я программист в спальне без каких-либо формальных знаний, но люблю собирать код и видеть, как он оживает на веб-страницах.

Что я пробовал и мой код:
КОДОВЫЙ НАБОР

                                 <!-- #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>
 

Некоторая сложность заключается в том, что вы смешиваете команды начальной загрузки 5 с командами начальной загрузки 3. Я имею в виду, что вы упомянули об использовании v5, но вы определенно? Я спрашиваю, потому что img-отзывчивый в вашем коде от v3 и с тех пор изменился на img-fluid. могут быть и другие примеры такого смешения и сопоставления, но я не могу определить это с первого взгляда. Кроме того, я посмотрел ссылку на кодовую ссылку, и галерея для меня вообще не работает, модальный даже не открывается. Не уверен, что это надежная ручка.