如何在滑块内插入响应式表单

Question

你好家伙！

我正在使用 ninja-slider 来提高响应速度。现在我有一个 bootstrap 表单，我想在滑块内显示，并且当滑块在不同分辨率的屏幕上移动时，这个表单应该响应。

我在谷歌上搜索了一下，但没有找到任何理想的解决方案。

帮帮我！

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 1

您可以将表单放在滑块内，它的行为是响应式的，但在移动分辨率下，您需要为滑块提供最小高度。这样表格就不会被隐藏。在 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;


}

享受.. :)

如何在滑块内插入响应式表单

How to insert a Rsponsive form inside slider

javascript

css

jquery

slider

twitter-bootstrap