bootstrap旋轉木馬滑塊自定義箭頭

我使用bootstraps旋轉木馬滑塊，但與自定義圖像，而不是隨它提供的圖形。

然而，它的問題在於它們位於滑塊的邊緣。左上方爲左側箭頭，右上方爲右側圖像。

我試圖改變位置，它的工作原理，但當窗口重新調整大小時，它並沒有停留在它們的位置。我不知道在哪裏定位代碼，以便代碼忽略鼠標懸停在箭頭上時出現的陰影。

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

我是用一個快速的外觀和測試不同的選擇，開發人員工具。絕對位置不起作用。有沒有其他方式可以做到這一點，所以它們與原始圖形顯示的位置相同，並且也做出反應？

圖片，上面有建議的修復... The right seems to be only problem though.

在代碼中所做的更改到目前爲止班上轉盤的加入CSS和IMG響應的控制自己。

-------------旗幟---------------- */

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

}

其他代碼我已經嘗試所有的效果很好，但只在桌面視圖。

來源

2014-12-02 Reeze Cornelius

你忘了發佈你的CSS代碼，或者你沒有做任何事嗎？ – azhpo 2014-12-02 11:47:00

@azhpo這只是我css我使用的是做錯了一切。 – 2014-12-02 12:42:55

添加到您的CSS文件這樣的：

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

來源

2014-12-02 11:51:01 stylesenberg

它的作品。唯一的問題是，正確的圖像現在不會像左邊的瀏覽器窗口一樣貼近瀏覽器窗口......而那令人討厭的引導程序陰影正在顯示一半。 – 2014-12-02 12:41:53

你可以發佈你的新問題的截圖嗎？和代碼（如果你改變了它）。 – stylesenberg 2014-12-02 12:51:58

大廈在stylesenberg的答案，你應該添加的代碼，但是，而不是調用.carousel控制，這將推動整個按鈕下降50％，通話而不是img元素。此外，你會想要將img元素向上移動50％的高度，這樣它就會完美地居中。

更新1：我添加了翻譯（-50％，-50％），以便將按鈕向左移動，如果不是，它們將被<span>元素抵消。

.carousel-control > span > img{   
    position: absolute; 
    /*set position of image from top to be 50%...*/ 
    top: 50%; 
    /*and then shift it down to make it perfectly center.*/ 
    transform: translate(-50%, -50%); 

    z-index: 5; 
    display: inline-block; 
}

更新2：我剛剛意識到它可以變得更簡單。由於您使用的是自定義滑塊箭頭，因此不需要<span>元素。所以，你的HTML代碼可以簡單地爲：

<a class="left carousel-control" href="https://getbootstrap.com/examples/carousel/#myCarousel" role="button" data-slide="prev"> 
    <img src="chevron-left.png" /> 
</a> 

<a class="right carousel-control" href="https://getbootstrap.com/examples/carousel/#myCarousel" role="button" data-slide="next"> 
    <img src="chevron-right.png" /> 
</a>

並只是從CSS中刪除「span」。

來源

2016-02-20 10:53:55

bootstrap旋轉木馬滑塊自定義箭頭

回答

相關問題