我使用bootstrap制作了一个旋转木马,但当图像发生变化时,它们都变得笨重,并且背景在变化时显示为白色,这实际上并不令人满意。 这是拳头时间我用引导旋转木马,所以也许我做错了什么......这是我的HTML:Clunky Bootstrap旋转木马
<div class="container-fluid">
<div class="row mainSlider">
<div class="carousel slide" id="main_slider" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#main_slider" data-slide-to="0" class="active"></li>
<li data-target="#main_slider" data-slide-to="1" class="active"></li>
<li data-target="#main_slider" data-slide-to="2" class="active"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/slide.jpg">
<div class="container">
<div class="col-md-6">
<h3>Title of the Slide</h3>
<p>Content of the Slide</p>
<a href="/services" class="viewMore">View More <i class="fa fa-angle-double-right"></i></a>
</div>
</div>
</div>
<div class="item active">
<img src="img/slide.jpg">
<div class="container">
<div class="col-md-6">
<h3>Title of the Slide 2</h3>
<p>Content of the Slide 3</p>
<a href="/services" class="viewMore">View More <i class="fa fa-angle-double-right"></i></a>
</div>
</div>
</div>
<div class="item active">
<img src="img/slide.jpg">
<div class="container">
<div class="col-md-6">
<h3>Title of the Slide 3</h3>
<p>Content of the Slide 3</p>
<a href="/services" class="viewMore">View More <i class="fa fa-angle-double-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
而且我做了一些自定义的CSS,使它适合我的设计:
.mainSlider {
height:443px;
}
#main_slider {
height:100%;
}
.mainSlider #main_slider .carousel-inner{
height:100%;
list-style-type:none;
padding:0;
margin:0;
}
.mainSlider #main_slider .carousel-inner .item {
height:100%;
padding:0;
margin:0;
box-sizing:border-box;
padding-bottom:40px;
color:#fff;
position:relative;
}
.mainSlider #main_slider .carousel-inner .item img {
width:100%;
position:absolute;
top:0;
left:0;
}
.mainSlider #main_slider .carousel-inner .item h3 {
margin:90px 0 30px 0;
font-size:45px;
font-family:Merriweather;
}
.mainSlider #main_slider .carousel-inner .item p {
font-size:17px;
}
.mainSlider #main_slider .carousel-inner .item a.viewMore {
margin:20px 0;
padding:10px 25px;
background-color:#eb7022;
display:inline-block;
border-radius:4px;
}
这是a gif它现在的样子。 很抱歉,如果这真的很愚蠢,我对前端开发很陌生。 谢谢!
编辑这里的的情况下,一个截屏,你看不到GIF:http://screencast.com/t/hWtUZcpRD
的GIF链接无法使用。 – Topr
@Topr嗯,怪异..无论如何,这里是一个截屏视频:http://screencast.com/t/hWtUZcpRD – Dogmatics