정적 텍스트가있는 전체 페이지 슬라이더로 부트 스트랩 캐 러셀

Question

배경이 바뀌면서 모든 슬라이드에 정적 텍스트가있는 슬라이더가 필요합니다.이 슬라이더는 반응 적이어야합니다.

나는 몇 가지 옵션을 시도했지만 우리는 내가 부트 스트랩 회전 목마를 사용하고 있지만, 의도 한대로 작동하지 않는 하나 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

의