css - Twitter Bootstrap 旋转木马 - 无法更改侧箭头

Question

我有一个 Twitter Bootstrap 轮播在我的网页上运行得很好，但我无法让侧边箭头按我想要的方式运行。我的 CSS 知识大概是 5 分(满分 10 分)。

目前，“字形”箭头是从窗口的左右边缘绝对定位的。当我缩小或扩大窗口时，这些箭头与窗口边缘的距离保持完全相同。这是奇怪和错误的，因为它们在旋转木马图像的顶部到处移动。我希望它们在旋转木马图像上保持固定位置，而不是在浏览器窗口上。我还需要将字体字形更改为透明图像。

单击时左右箭头滚动轮播。它们不是图像，它们是字形，我猜这是某种奇怪的字体。这是 HTML:

<a href="#myCarousel" class="left carousel-control" data-slide="prev" style="width:0px"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a href="#myCarousel" class="right carousel-control" data-slide="next" style="width:0px"><span class="glyphicon glyphicon-chevron-right"></span></a>

这是 href 的 css:

.carousel-control {
background: #343432;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 15%;
font-size: 20px;
color: #ffffff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);

这是内部跨度的 css:

.glyphicon-chevron-right {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
}

和:

.glyphicon {
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
-moz-osx-font-smoothing: grayscale;
}

虽然它没有显示在原始 html 中，但是当通过 Chrome 开发工具栏检查器查看时，在跨度内我看到了这个:

::before

所以我需要知道如何更改箭头位置以相对于轮播图像而不是浏览器窗口保持固定。我需要将字形更改为我拥有的一些透明箭头。

如果您想检查任何元素，这是实际的网页: http://www.zerogravpro.com/temp/bootstrap/

谢谢。

Answer 1

我已经在 JSFIDDLE 中复制了您的代码重现问题。

你有这样的结构:

<div id="myCarousel" class="carousel slide">
   <div class="carousel-inner"></div>
   <a href="#myCarousel" class="left carousel-control"></a>
   <a href="#myCarousel" class="right carousel-control"></a>
</div>

其中 a 标签是导航箭头，相对于他的容器 #myCarousel 定位在 absolute 位置。跨度内部的实际位置使箭头远离边缘。

由于容器 #myCarousel 始终随屏幕调整大小，因此箭头始终可见并且可以达到极限:

• 首先删除 a 标签的内联样式:

  <a href="#myCarousel" class="left" ... /*style="width:0px" Remove this*/>
  

• 然后将此添加到您的 CSS 中:

  .carousel-control {
    top:50%;
    width:auto;
    height:1em;
    background:transparent;
  }
  .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right  {
    position:static;
    display:block;
    width:auto;
  }
  .carousel-control .glyphicon-chevron-left:before {
    margin-left:0;
  }
  

现在你有 THIS RESULT

现在要将 arrow 更改为图像，您可以重置 before 伪元素的内容，而是将图像添加为背景，如下所示:

   .carousel-control .glyphicon-chevron-right:before {
       //Reset the icon
       content: " ";
       //Give layout
       display:block;
       //Your image as background
       background:url('http://yourarrow.png') no-repeat;
       //To show full image set the dimensions
       width:30px;
       height:30px;
   }

现在您可以拥有 THIS RESULT