引导旋转木马作为带有静态文本的整页滑块

Question

我需要一个滑块，这将有与背景变化的所有幻灯片静态文本，这个滑块应该是响应性的。

我试过几种选择，但我们总是陷入这样那样的问题。

我正在使用Bootstrap carousel，但它不能像预期的那样工作。我面临着下面的问题。对于大屏幕和移动屏幕，高度/宽度应该调整为屏幕高度/宽度，但我无法让它以这种方式工作并提供帮助

​

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