html - 为什么我的轮播没有加载到我的网页？

问题描述

我无法让我的轮播加载到我的网页中。我已经尝试将 CSS 高度/宽度添加到轮播 div，甚至尝试将高度添加到包含的 img 元素，但一定是在某个地方失败了。非常感谢所有帮助。这是值得注意的代码（从较大的文档中截取）...

在我脑海中：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

在我身体的底部：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

旋转木马：

    <div id="carousel" class="carousel slide" data-right="carousel">
                        <div class="carousel-inner" roll="listbox">
                            <div class="carousel-item">
                                <img class="d-block w-100" src="https://www.neptunus.co.uk/app/uploads/2019/05/evolution-pieterschelte-rotterdam-76997-1.jpg" alt="Temporary structures built on the Pioneering Spirit catamaran">
                                <div class="carousel-caption">
                                    <h3>Pioneering Spirit</h3>
                                    <p>Weeks at sea produced thousands of square meters of temporary hospitality structures.</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="https://www.eventindustrynews.com/wp-content/uploads/2018/03/Neptunus-Image-2.jpg" alt="Main structure for England's Rugby World Cup.">
                                <div class="carousel-caption">
                                    <h3>Rugby World Cup</h3>
                                    <p>Twickenham proves annual demand for White Rose Crew, but this year was special.</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="https://www.neptunus.co.uk/app/uploads/2019/05/evolutioniii-thales-farnborough1.jpg" alt="A three story structure for Farnborough Airshow.">
                                <div class="carousel-caption">
                                    <h3>Thales</h3>
                                    <p>Our favourite biannual build of the worlds largest airshow.</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="https://s3.eu-west-2.amazonaws.com/luxurylondon.co.uk-storage-bucket-001/images/articles-body/603/masterpiece-2019-london.jpg" alt="Masterpiece Arts Fair, Chelsea.">
                                <div class="carousel-caption">
                                    <h3>Masterpiece</h3>
                                    <p>We are proud to be an integral part of this incredible transformation year in, year out.</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="https://ichef.bbci.co.uk/news/1024/cpsprodpb/62AF/production/_112536252_cdf_200420_cardiffhospital18.jpg" alt="Emergancy hospital built in the Pricipality Stadium.">
                                <div class="carousel-caption">
                                    <h3>Emergancy Covid-19 Field Hospital</h3>
                                    <p>Helping turn The Pricipality Stadium into Wales largest hospital in just 10 days.</p>
                                </div>
                            </div>
                        </div>
                    </div>

标签： htmljquerybootstrap-4carousel

html - 为什么我的轮播没有加载到我的网页？

问题描述

解决方案

推荐阅读