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;
}