引导轮播作为带有静态文本的整页滑块

Question

我需要一个滑块，它在所有幻灯片上都有静态文本，背景会发生变化，而且这个滑块应该是响应式的。

我尝试了几个选项，但我们一直陷入一个或其他问题

我正在使用 Bootstrap 轮播，但它没有按预期工作。我面临以下问题。高度/宽度应调整为大屏幕和移动屏幕的屏幕高度/宽度，但我无法使其以这种方式工作并提供帮助

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <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>
        <div class="carousel-inner">
          <div class="item active">
            <img src="https://images8.alphacoders.com/430/thumb-1920-430508.jpg" alt="First slide">
            <div class="carousel-caption">
              <h3>
                                First slide</h3>
              <p>
                Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            </div>
          </div>
          <div class="item">
            <img src="https://images4.alphacoders.com/658/thumb-1920-658896.jpg" alt="Second slide">
            <div class="carousel-caption">
              <h3>
                                Second slide</h3>
              <p>
                Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            </div>
          </div>
          <div class="item">
            <img src="http://www.tokkoro.com/picsup/1190917-tree-frog.jpg" alt="Third slide">
            <div class="carousel-caption">
              <h3>
                                Third slide</h3>
              <p>
                Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            </div>
          </div>
        </div>
        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right">
                        </span></a>
      </div>
      <div class="main-text hidden-xs">
        <div class="col-md-12 text-center">
          <h1>
                        Static Headline And Content</h1>
          <h3>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                      
                       
                    </h3>

        </div>
      </div>
    </div>
  </div>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

https://codepen.io/anon/pen/baNPqE

Answer 1

将以下内容添加到您的 CSS 代码中应该没问题，即轮播的屏幕高度：

.carousel {
  max-height: 100vh;
}
.item {
  max-height: 100vh
}

链接https://codepen.io/kvyb/pen/ppvXqd