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!


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

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

Answer Source

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;
.formSection {
  left: 0;
  right: 0;


Enjoy.. :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download