Question

代码：

<section id="featured" class="bg">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div id="main-slider" class="main-slider flexslider">
                    <ul class="slides">
                      <li>
                        <img src="<?php echo base_url(); ?>resources/img/slides/flexslider/1.jpg" alt="" />
                      </li>
                      <li>
                        <img src="<?php echo base_url(); ?>resources/img/slides/flexslider/2.jpg" alt="" />
                      </li>
                      <li>
                        <img src="<?php echo base_url(); ?>resources/img/slides/flexslider/3.jpg" alt="" />
                      </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>  
</section>

<input type="text" name="bar" id="bar" placeholder="Search Your Result">
<input type="submit" name="submit" id="submit" value="search">

在我的代码中，我有一个滑块横幅，其中三个图像同时滑动，我想在滑块上添加表单输入或搜索栏，即滑块移动的图像，但应该修复搜索栏。那么，我该怎么做？请帮助我或分享参考。

谢谢

Answer 1

使用positions规则将输入定位在滑块顶部。

$('.flexslider').flexslider({
    animation: "slide",
    controlNav: false
  });

.slider-wrapper {
  position: relative;
}

.inputs-wrapper {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}

.flex-direction-nav {
 display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.4/jquery.flexslider.min.js"></script>
<link rel="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.4/flexslider.min.css" tpye="text/css">
<section id="featured" class="bg">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 slider-wrapper">
                <div id="main-slider" class="main-slider flexslider">
                    <ul class="slides">
                      <li>
                        <img src="http://via.placeholder.com/350x150" alt="" />
                      </li>
                      <li>
                        <img src="http://via.placeholder.com/350x150" alt="" />
                      </li>
                      <li>
                        <img src="http://via.placeholder.com/350x150.jpg" alt="" />
                      </li>
                    </ul>
                </div>
                <div class="inputs-wrapper">
                  <input type="text" name="bar" id="bar" placeholder="Search Your Result">
                  <input type="submit" name="submit" id="submit" value="search">                 </div>
            </div>
        </div>
    </div>  
</section>

Answer 2

使用Bootstrap的输入组。请记住将整个代码块放在<form>标记内。

<section id="featured" class="bg">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="input-group">
                    <input class="form-control" type="text" name="bar" id="bar" placeholder="Search Your Result">
                    <span class="input-group-addon">
                        <button class="btn btn-sm btn-light" type="submit" name="submit" id="submit">
                            Search
                        </button>
                    </span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div id="main-slider" class="main-slider flexslider">
                    <ul class="slides">
                        <li>
                            <img src="<?php echo base_url(); ?>resources/img/slides/flexslider/1.jpg" alt="" />
                        </li>
                        <li>
                            <img src="<?php echo base_url(); ?>resources/img/slides/flexslider/2.jpg" alt="" />
                        </li>
                        <li>
                            <img src="<?php echo base_url(); ?>resources/img/slides/flexslider/3.jpg" alt="" />
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>  
</section>

如何在滑块横幅上添加表单输入？

2 个答案: