bootstrap轮播滑块自定义箭头

Question

好的

我正在使用bootstraps轮播滑块,但使用自定义图像而不是随附的glyphicons.

然而,它的问题在于它们朝向滑块的边缘定位.左上角为左箭头,右上角为右图.

我已经尝试改变位置,但是当窗口重新调整大小时,它不会停留在它们的位置.我不知道在哪里定位代码,以便代码忽略悬停在箭头上时出现的阴影.

这是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>

我使用开发人员工具快速查看和测试不同的选项.绝对位置不起作用.有没有其他方法可以实现它,所以它们与原始glyphicons出现在同一位置并做出响应？

带有建议修复的图片......

到目前为止,代码中所做的更改是在轮播控件本身的类中添加了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;

}

我试过的其他代码都很好,但只在桌面视图中.

Answer 1

将其添加到您的CSS文件中:

.carousel-control {
position: absolute;
top: 50%; /* pushes the icon in the middle of the height */
z-index: 5;
display: inline-block;
}