我想制作类似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>
如何将表单控件添加到滑块的中间。
请帮帮我..
答案 0 :(得分:0)
将输入字段放在div
中,并将div
放在amazingslider
内。然后按照css给出它:
div
{
position: absolute;
z-index: 10;
/* and other properties */
.
.
.
}