自从我开始使用它以来,我正在使用 bootstrap 中的默认轮播,我的 html 文件中有三个元素。其中之一是:
<div id="myCarousel" class="carousel">
<ol class="carousel-indicators">
<li class="active" data-target="#myCarousel" data-slide-to="0"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="active item">
<div id="labamba">
<img src="images/cover.jpg" alt="Cover">
</div>
</div>
<div class="item">
<div id="labamba">
<img src="images/cover.jpg" alt="Cover">
</div>
</div>
<div class="item">
<div id="labamba">
<img src="images/cover.jpg" alt="Cover">
</div>
</div>
</div>
<a href="#myCarousel" class="left carousel-control" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span> </a>
<a href="#myCarousel" class="right carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span> </a>
</div>
我想让我的旋转木马有很多元素,而不仅仅是一个带有标题的大图像,我试图给 div 添加广告,但是我注意到当我放一个大图像时它覆盖了旋转木马控件我不知道为什么。有人可以帮帮我吗?
CSS 覆盖:
#myCarousel {
background-color: #222;
background-attachment: fixed;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 0;
}
#labamba {
font-size: 1.5vw;
position: absolute;
left: 15%;
right: 15%;
bottom: 20px;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #ffffff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
为什么 carousel-control 的高度和宽度太大?我可以只根据箭头大小调整它的大小吗?我不知道该怎么做,因为当我修改 css 时,它会改变位置,就像它是一个大图像而不仅仅是箭头一样。
我使用的是 Bootstrap 3.3 github 版本,我认为它是最新的,我没有修改任何东西。感谢您的帮助。
截图:
最佳答案
设置z-index:11;和position:relative于#myCarousel 样式。
发布指向您的 bootstrap css 的链接,我将能够帮助您解决第二个问题。
关于javascript - Bootstrap carousel-control 正在获取图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32841548/