슬라이더 안에 응답 폼을 삽입하는 방법

Question

Hy guyz!

응답 성을 위해 ninja-slider를 사용하고 있습니다. 이제 슬라이더 내부에 표시 할 부트 스트랩 양식이 있으며 슬라이더가 다른 해상도 화면으로 이동하면이 양식이 반응 적이어야합니다.

나는 아이디어를 얻기 위해 인터넷 검색을 시도했지만 이것에 대한 이상적인 해결책을 찾지 못했습니다.

도움말 guyz!

는 반응 동작하지만 모바일 해상도는 슬라이더 분 높이를 제공 할 필요가 슬라이더 내부 양식을 배치 할 수 있습니다

<!--start--> 
    <div id="ninja-slider"> 
     <div class="slider-inner"> 
      <ul> 
       <li> 
        <a class="ns-img" href="img/002.jpg"></a> 
        <div class="caption">RESPONSIVE</div> 
       </li> 
       <li> 
        <a class="ns-img" href="img/003.jpg"></a> 
        <div class="caption">TOUCH·ENABLED</div> 
       </li> 
       <li> 
        <a class="ns-img" href="img/004.jpg"></a> 
        <div class="caption">VIDEO·AUDIO</div> 
       </li> 
       <li> 
        <a class="ns-img" href="img/005.jpg"></a> 
        <div class="caption">NON·JQUERY</div> 
       </li> 
       <li> 
        <a class="ns-img" href="img/zess.jpg"></a> 
        <div class="caption">MOBILE·FRIENDLY</div> 
       </li> 
      </ul> 
      <div class="navsWrapper"> 
       <div id="ninja-slider-prev"></div> 
       <div id="ninja-slider-next"></div> 
      </div> 
     </div> 
    </div> 
    <!--end--> 

     <form role="form"> 
    <div class="form-group"> 
     <label for="email">Email:</label> 
     <input type="email" class="form-control" id="email" placeholder="Enter email"> 
    </div> 
    <div class="form-group"> 
     <label for="pwd">Password:</label> 
     <input type="password" class="form-control" id="pwd" placeholder="Enter password"> 
    </div> 
    <div class="checkbox"> 
     <label><input type="checkbox"> Remember me</label> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 
    </form> 

Answer 1

HTML. 그래서 양식은 숨겨지지 않습니다. CODEPEN

li.dummySlide { 
    position: relative; 
    width:100%; 
    height:100%; 
} 
.formSection { 
    position:absolute; 
    max-width:300px; 
    margin:auto; 
    left: 0; 
    right: 0; 
    top:0; 
    bottom:0; 


} 

에 내 코드를 확인 :