javascript - 在 Div 容器中时，Swiper coverflow 为空白

Question

先声明一下，我不是很熟练，也不知道很多好的做法，我是边做边学的，因为元素来了。

我将 Swiper 用于游戏列表 slider ，但是当它放入另一个 Div 中时它就消失了。我可以在 Div 之外正确定位和调整它的大小，但我无法让它以这种方式响应并且它非常杂乱无章。

下面是部分，时间表在左边，游戏 slider 在右边。在 Games Div 之外时它会显示，但在 Div 内部时它会完全消失。

        <!-- Start of schedule container -->
    <div id="info-wrapper">
        <section id="info">
            <div id="schedule" class="container">

                <div class="row">
                    <div class="col">
                        <h1 id="title"> Stream Schedule</h1>
                    </div>
                </div>

                <div class="row">
                    <div id="dates" class="col">
                        <h1> Mondays </h1></div>
                    <div class="col">
                        <p>9:00 - 10:00 PM </p>
                    </div>
                </div>

                <div class="row">
                    <div id="dates" class="col">
                        <h1> Tuesdays </h1></div>
                    <div class="col">
                        <p>9:00 - 10:00 PM </p>
                    </div>
                </div>

                <div class="row">
                    <div id="dates" class="col">
                        <h1> Wednesdays </h1></div>
                    <div class="col">
                        <p>9:00 - 10:00 PM </p>
                    </div>
                </div>

                <div class="row">
                    <div id="dates" class="col">
                        <h1> Thursdays </h1></div>
                    <div class="col">
                        <p>9:00 - 10:00 PM </p>
                    </div>
                </div>

                <div class="row">
                    <div id="dates" class="col">
                        <h1> Fridays </h1></div>
                    <div class="col">
                        <p>9:00 - 10:00 PM </p>
                    </div>
                </div>
            </div>

            <!-- Container for game list -->
            <div id="games" class="container">
              <h1 id="title"> What I've been playing </h1> 

            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
                    <div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
                    <div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
                    <div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
                    <div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
                    <div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>

                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
    </div>

    </section>

下面是主样式表的完整 CSS。可以在 http://idangero.us/swiper/ 找到 Swiper 的所有其他样式

body, html {
     height: 100%;
     width: 100%;
}
 body {
     margin: 0;
     padding: 0;
     color: #fff;
     font-size: 100%;
     line-height: 1.25em;
     font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
}
 a {
     text-decoration: none;
     color: inherit;
}
 .clear:after, .clear:before, .container:after, .container:before {
     content: "";
     display: table;
}
 .clear:after, .container:after {
     clear: both;
}
 .clear, .container {
     zoom: 1;
}
 #header ul #nav li a:hover, .accent, .btn:hover {
     background: #rgba(62, 24, 82, 1);
     color: #fff;
}
 .forum {
     padding: 3px 8px 4px 8px !important;
}
 .btn:hover {
     border-color: #6246a3;
}
 .container {
     padding: 0 3%;
}
 #header {
     position: fixed;
     z-index: 100;
     top: 0;
     left: 0;
     width: 100%;
     box-sizing: border-box;
     padding: 40px 35px;
}
 #header #displayname {
     margin: 0;
     padding: 0;
     font-size: 137%;
     font-weight: 600;
     letter-spacing: 2px;
     text-transform: uppercase;
}
 .label {
     font-family: Arial, sans-serif;
     font-size: 54%;
     letter-spacing: 1px;
     padding: 0 8px;
     border-radius: 1em;
     -webkit-border-radius: 1em;
     -moz-border-radius: 1em;
     white-space: nowrap;
     vertical-align: middle;
     font-weight: 700;
     margin-top: -4px;
     display: inline-block;
}
 #header ul#nav {
     margin: 2px 0 0;
     padding: 0;
}
 #header ul#nav li {
     display: inline-block;
     list-style: none;
     font-size: 120%;
}
 #header ul#nav li a {
     padding: 3px 8px;
     border-radius: 100px;
     -webkit-border-radius: 100px;
     -moz-border-radius: 100px;
     transition: background .3s ease;
     outline: none;
}
 #content {
     box-sizing: border-box;
     padding: 132px 0;
     width: 100%;
     height: 100%;
     display: table;
     text-align: center;
     background: rgba(0, 0, 0, .7);
}
 #content .container {
     display: table-cell;
     vertical-align: middle;
}
 .avatar {
     border-radius: 50%;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     margin-bottom: 25px;
     width: 145px;
     height: 145px;
}
 .name {
     color: #eee;
     font-size: 104%;
     font-weight: 600;
     letter-spacing: 1px;
     text-transform: uppercase;
     margin: 0 0 7px;
     line-height: 1.5em;
}
 .status {
     font-size: 220%;
     line-height: 1.3em;
     font-weight: 300;
     letter-spacing: 0;
     margin: 0 0 20px;
}
 .btn {
     padding: 15px 24px;
     border: 1px solid #FFF;
     border-radius: 30px;
     -webkit-border-radius: 30px;
     -moz-border-radius: 30px;
     font-size: 100%;
     text-transform: uppercase;
     letter-spacing: 2px;
     font-weight: 700;
     white-space: nowrap;
     vertical-align: middle;
     display: inline-block;
     transition: background ease .3s;
}
 .live {
     background: rgba(62, 24, 82, 1);
     border: none;
     -webkit-animation: pulse 2s infinite;
     -moz-animation: pulse 2s infinite;
     -o-animation: pulse 2s infinite;
     animation: pulse 2s infinite;
}
 .label .live-status {
     font-size: 20px;
     line-height: 19px;
     vertical-align: middle;
     margin-right: 3px;
}
 #footer {
     position: absolute;
     z-index: 100;
     bottom: 0;
     left: 0;
     width: 100%;
     box-sizing: border-box;
     padding: 14px 30px;
}
 #footer p {
     font-size: 80%;
     color: #FFF;
     font-weight: 600;
     opacity: .4;
     transition: opacity ease .3s;
     line-height: 1em;
}
 #footer p:hover {
     opacity: .8;
}
 #footer .left {
     float: left;
}
 #footer .right {
     float: right;
}
 @media (min-width: 801px) {
     #header #displayname {
         float: left;
    }
     #header ul#nav {
         float: right;
    }
     #header ul#nav li {
         margin-left: 21px;
    }
}
 @media (max-width: 800px) {
     #header {
         padding: 24px 20px 20px;
    }
     #header #displayname {
         text-align: center;
    }
     #header ul#nav {
         margin: 20px auto 0;
         text-align: center;
    }
     #header ul#nav li {
         margin: 0 4px 12px;
    }
}
 @media (max-width: 750px) {
     .name {
         font-size: 100%;
    }
     .status {
         font-size: 200%;
    }
     .btn {
         width: 80%;
    }
     .avatar {
         width: 120px;
         height: 120px;
    }
     #footer p {
         font-size: 60%;
         padding: 0px 0px;
    }
     .accent, .btn:hover, #header ul#nav li a:hover {
         background: #330066;
    }
     .btn:hover {
         border-color: #330066;
    }
     .live {
         background: #330066;
         border: none;
    }
     @-webkit-keyframes pulse {
         from {
             opacity: 1.0;
             -webkit-box-shadow: 0 0 15px #330066;
        }
         50% {
             opacity: 0.8;
             -webkit-box-shadow: none;
             0 0 0px #330066;
        }
         to {
             opacity: 1.0;
             -webkit-box-shadow: 0 0 15px #330066;
        }
    }
     @-moz-keyframes pulse {
         from {
             opacity: 1.0;
             -moz-box-shadow: 0 0 15px #330066;
        }
         50% {
             opacity: 0.8;
             -moz-box-shadow: none;
             0 0 0px #330066;
        }
         to {
             opacity: 1.0;
             -moz-box-shadow: 0 0 15px #330066;
        }
    }
     @-o-keyframes pulse {
         from {
             opacity: 1.0;
             -o-box-shadow: 0 0 15px #330066;
        }
         50% {
             opacity: 0.8;
             -o-box-shadow: none;
             0 0 0px #330066;
        }
         to {
             opacity: 1.0;
             -o-box-shadow: 0 0 15px #330066;
        }
    }
     @keyframes pulse {
         from {
             opacity: 1.0;
             box-shadow: 0 0 15px #330066;
        }
         50% {
             opacity: 0.8;
             box-shadow: none;
             0 0 0px #330066;
        }
         to {
             opacity: 1.0;
             box-shadow: 0 0 15px #330066;
        }
    }
}
 #content {
     background: rgba(0, 0, 0, .8) 
}
 #live {
     background: url("http://www.tokkoro.com/picsup/2860789-batman-the-dark-knight-joker-messenjahmatt___movie-wallpapers.jpg") no-repeat center center;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     height: 100vh;
}
 #info-wrapper {
     background: url("../img/cell.jpg") no-repeat center center;
}
 #info {
     height: 60vh;
     width: 100%;
     padding: 0;
     margin: 0;
     background-color: rgba(39, 0, 59, .8);
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
}
 #schedule {
     background-color: rgba(0, 0, 0, .4);
     display: inline-flex;
     flex-direction: column;
     width: 30vh;
     height: auto;
     float: left;
}
 #dates {
     font-size: 80%;
}
 #dates .p {
     font-size: 100%;
}
/* Games Section Wrapper */
 .swiper-container {
     width: 50%;
     height: 50%;
}
 .swiper-slide {
     text-align: center;
     font-size: 18px;
     background: #fff;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
    /* Center slide text vertically */
     display: -webkit-box;
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     -webkit-justify-content: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     -webkit-align-items: center;
     align-items: center;
}
 #title {
     color: #fff;
     font-size: 150%;
     font-weight: 600;
     letter-spacing: 2px;
}
 .col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths {
     position: relative;
     min-height: 1px;
     padding-right: 15px;
     padding-left: 15px;
}
 .col-xs-5ths {
     width: 20%;
     float: left;
}
/* Pulse Animations Min */
 @-webkit-keyframes pulse {
     from {
         opacity: 1;
         -webkit-box-shadow: 0 0 12px #6246a3;
    }
     50% {
         opacity: .8;
         -webkit-box-shadow: none;
         : 0 0 0 #6246a3;
    }
     to {
         opacity: 1;
         -webkit-box-shadow: 0 0 12px #6246a3;
    }
}
 @-moz-keyframes pulse {
     from {
         opacity: 1;
         -moz-box-shadow: 0 0 12px #6246a3;
    }
     50% {
         opacity: .8;
         -moz-box-shadow: none;
         : 0 0 0 #6246a3;
    }
     to {
         opacity: 1;
         -moz-box-shadow: 0 0 12px #6246a3;
    }
}
 @-o-keyframes pulse {
     from {
         opacity: 1;
         -o-box-shadow: 0 0 12px #6246a3;
    }
     50% {
         opacity: .8;
         -o-box-shadow: none;
         : 0 0 0 #6246a3;
    }
     to {
         opacity: 1;
         -o-box-shadow: 0 0 12px #6246a3;
    }
}
 @keyframes pulse {
     from {
         opacity: 1;
         box-shadow: 0 0 12px #6246a3;
    }
     50% {
         opacity: .8;
         box-shadow: none;
         : 0 0 0 #6246a3;
    }
     to {
         opacity: 1;
         box-shadow: 0 0 12px #6246a3;
    }
}
/* Querying additional screen sizes. */
 @media (min-width: 768px) {
     .col-sm-5ths {
         width: 20%;
         float: left;
    }
}
 @media (min-width: 992px) {
     .col-md-5ths {
         width: 20%;
         float: left;
    }
}
 @media (min-width: 1200px) {
     .col-lg-5ths {
         width: 20%;
         float: left;
    }
}
 

如果我在这里缺少更多信息，请告诉我，我会更新!对此感到困惑，所以在此先感谢您的帮助!

Answer 1

添加 CSS:

#games{
    height: 100%;
}