如何在旋转木马的中间放置搜索框?

时间:2015-09-18 10:16:22

标签: javascript jquery html css twitter-bootstrap

我想制作类似http://www.zoomcar.com/

的内容

这是我使用惊人滑块的旋转木马代码。

<div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:100%;margin:0 auto;">
  <div class="form-group">    
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <input type="text" class="form-control input-lg" placeholder="Where do you wanna go?">  
        </div>
        <div class="col-md-2">
          <input type="date" class="form-control input-lg" name="start" placeholder="Check In">   
        </div>
        <div class="col-md-2">
          <input type="date" class="form-control input-lg" name="end" placeholder="Check Out">            
        </div>
        <div class="col-md-2">
          <a class="btn btn-lg btn-success" href="#" role="button">GO</a>
        </div>
      </div>
    </div>
  </div>
  <div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;">
    <ul class="amazingslider-slides" style="display:none;">
      <li><img src="images/example-slide-1.jpg" alt="example-slide-1" />
      </li>
      <li><img src="images/example-slide-2.jpg" alt="example-slide-2" />
      </li>
      <li><img src="images/example-slide-3.jpg" alt="example-slide-3" />
      </li>
      <li><img src="images/example-slide-4.jpg" alt="example-slide-4" data-texteffect="Bottom bar" data-duration="2000" />
      </li>
    </ul>
    <ul class="amazingslider-thumbnails" style="display:none;">
      <li><img src="images/example-slide-1-tn.jpg" alt="example-slide-1" /></li>
      <li><img src="images/example-slide-2-tn.jpg" alt="example-slide-2" /></li>
      <li><img src="images/example-slide-3-tn.jpg" alt="example-slide-3" /></li>
      <li><img src="images/example-slide-4-tn.jpg" alt="example-slide-4" /></li>
    </ul>
  </div>
</div>

如何将表单控件添加到滑块的中间。

请帮帮我..

1 个答案:

答案 0 :(得分:0)

将输入字段放在div中,并将div放在amazingslider内。然后按照css给出它:

    div
    { 
        position: absolute;
        z-index: 10;
        /* and other properties */
                .
                .
                .
    }