Bootsrap jQuery轮播图像堆叠一个在另一个

Question

我的旋转木马有问题，就像我正在处理的其他网页上工作一样，但是现在它有点工作，但它显示如下： SCREENSHOT

三张图像叠加在另一张图像之上，而不是仅显示一张图像，并不时更改它们。

以下是该特定网页的HTML和CSS：

/********
GENERAL
********/

* {
    box-sizing: border-box;
    text-align: center;
    font-family: 'Alegreya', serif;
}

a:link,
a:visited {
    color: #ffffff;
}

a:hover,
a:active {
    color: #ffffff;
    text-shadow: 1px 1px 8px #2aabd2;
    text-decoration: none;
}

/********
BODY
********/

body {
    background: #000000;
    margin: 0 auto;
    width: 100%;
}

/********
HEADER
********/

header {
    display: flex;
    border-bottom: 1px solid #000000;
    padding-top: 10px;
    background: #000000;
    height: 60px;
}

h1 {
    color: #ffffff;
    float: left;
    padding-left: 15px;
    font-size: 32px;
}

/********
NAVBAR
********/

header h1 {
    flex-grow: 2;
}

header ul {
    flex-grow: 5;
}

.navbar {
    display: flex;
    flex-direction: row;
}

.navbar li {
    list-style: none;
    padding-left: 20px;
}

/********
SECTION
********/

section {
    padding-top: 60px;
}

/********
FOOTER
********/

footer {
    padding: 5px 0;
    border-top: 1px solid #000000;
    background: #000000;
}

/********
CAROUSEL
********/

.carousel {
    width: 80%;
    margin: 0 auto;
}

.carousel .item {
    width: 80%;
    margin: 0 auto;
}

.carousel-inner > .item > img {
    max-width: 100%;
    max-height: 90vh;
    margin: 0 auto;
}

    <section class="container">

        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="img/wordpress18.jpg" alt="Slide1">
                </div>
                <div class="item">
                    <img src="img/wordpress7.jpg" alt="Slide2">
                </div>
                <div class="item">
                    <img src="img/wordpress1.jpg" alt="Slide3">
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div> <!-- Carousel -->

    </section>

任何线索？我过去几个小时都找不到任何错误