スタティックテキストのフルページスライダーとしてのブートストラップカルーセル

Question

背景が変化するすべてのスライドに静的テキストが表示されるスライダーが必要です。このスライダーは応答するはずです。

私はいくつかのオプションを試してみましたが、我々は、私はブートストラップカルーセルを使用していますが、それは意図したとおりに動作していない1またはtehの他の問題

に立ち往生続けます。私はそれに続く問題に直面する。高さ/幅が大画面のための画面の高さ/幅&携帯の画面に調整する必要がありますが、私はそれがそのように動作し、以下を追加します

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