我对代码、引导程序和dreamweave真的很陌生。我在我正在建设的网站上添加了一个旋转木马,运行得非常好,但我必须做点什么,现在当自动滚动时,当我点击向右滚动时,图像会失去图像的下半部分,但当我向左滚动时不会。
<div id="carousel1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="images/Slider and gallery/img_1_blank.jpg" alt="image of neat 3.0KW (12 panel) solar system, on sandstone house with black tin roof and blue skys" width="992" height="282" class="center-block">
<div class="carousel-caption">
<h3>First slide Heading</h3>
<p>First slide Caption</p>
</div>
</div>
<div class="item"><img src="images/Slider and gallery/img_2_blank.jpg" width="992" height="282" alt="" class="center-block">
<div class="carousel-caption">
<h3>Second slide Heading</h3>
<p>Second slide Caption</p>
</div>
</div>
<div class="item"><img src="images/Slider and gallery/img_3_blank.jpg" width="992" height="282" alt="" class="center-block">
<div class="carousel-caption">
<h3>Third slide Heading</h3>
<p>Third slide Caption</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel1" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
如果你需要任何进一步的信息,请告诉我。提前感谢
-
首先删除DIV元素上的内联宽度和高度。
在您的main.css文件中创建一个css类,该类将具有css属性,然后在html元素中调用该类,但如果您想让网站响应,我建议您不要使用固定宽度,除非您要实现媒体查询。在我的例子中,我创建了一个自定义css类,看起来像这样。
.carousel-img-item { width: 100%; height: 500px}
-
第二步,拆除班级中心块。
- css类.center-block添加了一个css属性min-height,这在一定程度上导致图像失去下半部分
您的html代码现在应该是这样的。
<img src="images/Slider and gallery/img" class="carousel-img-item">