Question

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

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

我正在使用Bootstrap轮播，但它没有按预期工作。我面临以下问题。高度/宽度应适应屏幕高度/宽度，适用于大屏幕和移动屏幕，但我不能让它以这种方式工作和帮助

＆＃13;

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

＆＃13;

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

Answer 1

将以下内容添加到CSS代码中，它应该没问题，即旋转木马的屏幕高度：

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

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

Bootstrap轮播作为整页滑块与静态文本

1 个答案: