jQuery Question

How to insert a Rsponsive form inside slider

Hy guyz!

I am using ninja-slider for responsiveness purpose. Now i have a bootstrap form that i want to display inside slider and this form should be responsive as slider moves on different resolutions screens.

I googled it to take idea but didn't found any ideal solution for this.

Help me guyz!

html

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

you can place the form inside slider it behaves responsive but in mobile resolution you need to to give min-height to slider. so that form won't get hidden. check my code at 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;


}

Enjoy.. :)