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旋转木马滑块自定义箭头

回答

相关问题