Html bootstrap 轮播滑块自定义箭头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27248258/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap carousel slider custom arrows
提问by Reeze Cornelius
Okay
好的
I'm using bootstraps carousel slider, but with custom images instead of the glyphicons supplied with it.
我正在使用引导程序轮播滑块，但使用自定义图像而不是随附的字形图标。
The problem with it however is that they are positioned towards the edges of the slider. Top left for the left arrow and top right for the right image.
然而，它的问题在于它们朝向滑块的边缘定位。左上角为左箭头，右上角为右图。
I have tried changing the position, which works, but doesn't stay in their position when the window gets re sized. And i don't know where to target the code so that the code ignores that shadow that appears when hovering over the arrow.
我试过改变位置，这有效，但当窗口重新调整大小时不会保持在它们的位置。而且我不知道将代码定位到何处，以便代码忽略悬停在箭头上时出现的阴影。
This is the html.
这是 html。
<div class="container-fluid banner_fluid">
<div class="carousel slide" data-ride="carousel" id="carousel_slider">
<div class="carousel-inner">
<div class="item active">
<img src="images/home_banner_1.jpg" alt="home slide 1" />
</div>
<div class="item">
<img src="images/home_banner_2.jpg" alt="home slide 1" />
</div>
<div class="item">
<img src="images/home_banner_3.jpg" alt="home slide 1" />
</div>
</div>
<div href="#carousel_slider" class="left carousel-control" data-slide="prev">
<span>
<img src="images/chevron_left.jpg" />
</span>
</div>
<div href="#carousel_slider" class="right carousel-control" data-slide="next">
<span>
<img src="images/chevron_right.jpg" />
</span>
</div>
</div>
</div>
I was using the Developer tools for a quick look and tester for different options. Position absolute does not work. Is there any other way to make it, so they appear in the same position as the original glyphicons and respond too?
我使用开发人员工具快速查看和测试不同选项。绝对位置不起作用。有没有其他方法可以使它们出现在与原始字形相同的位置并做出响应？
Image with the suggested fix on it...
带有建议修复的图像...
The changes made in the code so far is the addition of css and img-responsive in the class of the carousel controls themselves.
到目前为止在代码中所做的更改是在轮播控件本身的类中添加了 css 和 img-responsive。
------------- banner ----------------*/
- - - - - - - 横幅 - - - - - - - - */
.banner_fluid {
padding-left:0;
padding-right:0;
}
.carousel-control {
position: absolute;
top: 50%; /* pushes the icon in the middle of the height */
z-index: 5;
display: inline-block;
}
}
The other code i have tried all gave the effect fine but only in desktop view.
我尝试过的其他代码都给出了很好的效果，但仅在桌面视图中。
采纳答案by stylesenberg
add this into your CSS file:
将此添加到您的 CSS 文件中：
.carousel-control {
position: absolute;
top: 50%; /* pushes the icon in the middle of the height */
z-index: 5;
display: inline-block;
}
