Question

Hy guyz！

我正在使用ninja-slider进行响应。现在我有一个我想要在滑块内显示的引导形式，当滑块在不同的分辨率屏幕上移动时，这个形式应该是响应的。

我用谷歌搜索它，但没有找到任何理想的解决方案。

帮帮我吧！

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;


}

享受.. :)）

如何在滑块内插入Rsponsive表单

1 个答案: